FORM HTML

html5The Forms are used to collect User input. To make full use of the Forms, or to be able to operate with user input, a backend structure is required. We will analyze in detail the implementation of this with Django. In this article we will focus on the structure of the HTML Forms, necessary to fully understand the server-side operation! The HTML element is used to create an HTML form for user input. The figure below represents an HTML registration form. Once the frontend side fields have been filled in, upon pressing the submit button they will be sent to the backend server and processed, and if necessary they will be stored in a database.

example html forms

ATTRIBUTES OF THE FROM

  • The action attribute defines the action to be performed when the form is submitted. Usually, the form data is sent to the server when the user clicks the submit button
  • The method attribute specifies the HTTP method to use when submitting the form data. The form data can be submitted as URL variables (with method = “get”) or as an HTTP post transaction (with method = “post”). The default HTTP method when submitting form data is GET
  • The autocomplete attribute specifies whether a form should have autocomplete enabled or disabled. When autocomplete is active, the browser automatically completes the values ​​based on the values ​​previously entered by the user
  • The novalidate attribute is a Boolean attribute. When present, it specifies that the form data (input) should not be validated at the time of submission.

HTTP GET METHOD

Adds the form data to the URL, in name/value pairs. NEVER use GET to send sensitive data! (the data of the submitted form is visible in the URL!). The length of a URL is limited (2048 characters). GET is useful for submitting forms where a user wants to bookmark the result, we also use GET for unsecured data, such as query strings in Google.

HTTP POST METHOD

Adds the form data inside the HTTP request body (the submitted form data is not displayed in the URL). POST has no size limit and can be used to send large amounts of data. Form submissions with POST cannot be added to bookmarks.

Action and Method attributes

INPUT TAG

The HTML <input> element is the most used form element. An <input> element can be displayed in many ways, depending on the type attribute. The <label> tag defines a label for many form elements. The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes), because when the user clicks on the text inside the <label> element, enable the radio button/checkbox. The for attribute of the <label> tag should be equal to the id attribute of the <input> element for the label to be linked to the input field.

  • <input type = “text”> defines a single line input field for text input
  • <input type = “radio”> defines a radio button. Radio buttons allow a user to select ONE option from a limited number of choices
  • <input type = “checkbox”> defines a checkbox. The checkboxes allow a user to select ZERO or MORE options from a limited number of choices
  • <input type = “submit”> defines a button to submit form data to a handler on the same backend side. The handler is typically a file on the server with a script for processing the input data. It is specified in the action attribute of the form
  • <input type = “password”> defines a password field
  • <input type = “reset”> defines a reset button which will reset all the form values ​​to their default values
  • <input type = “button”> defines a button
  • <input type = “color”> is used for input fields which should contain a color. Depending on browser support, a color picker may appear in the input field
  • <input type = “date”> is used for input fields which should contain a date. Depending on browser support, a date picker may appear in the input field
  • <input type = “email”> is used for input fields which should contain an email address. Depending on the browser support, the email address can be automatically validated once sent. Some smartphones recognize the email type and add “.com” to the keyboard to match the email input
  • <input type = “file”> defines a file selection field and a “Browse” button for uploading files
  • <input type = “hidden”> defines a hidden input field (not visible to a user). A hidden field allows web developers to include data that cannot be viewed or edited by users when a form is submitted. A hidden field often stores which database record needs to be updated when the form is submitted. Note: Although the value is not shown to the user in the page content, it is visible (and can be changed) using any browser’s developer tools or the “View Source” functionality. Do not use hidden inputs as a form of security!
  • <input type = “number”> defines a numeric input field. You can also set restrictions on which numbers are accepted by setting the min and max attributes
  • <input type = “range”> defines a control to insert a number whose exact value is not important (such as a slider control). The default range is 0 to 100. However, you can set restrictions on accepted numbers with the min, max and step attributes
  • <input type = “tel”> is used for input fields which should contain a telephone number
  • <input type = “time”> allows the user to select a time (no time zone). Depending on browser support, a time selector may be displayed in the input field
  • <input type = “url”> is used for input fields which should contain a URL address. Depending on your browser support, the URL field may be automatically validated once submitted.

THE ELEMENTS OF THE HTML FORM

  • ELEMENT SELECT

The <select> element defines a drop-down list. The <option> elements define an option that can be selected. By default, the first item in the drop-down list is selected. To define a preselected option, add the selected attribute to the option. Use the multiple attribute on the select tag to allow the user to select more than one value.

  • TEXTAREA ELEMENT

The <textarea> element defines a multiline input field (a text area). The rows attribute specifies the number of rows visible in a text area. While the cols attribute specifies the visible width.

  • FILEDSET ELEMENTS AND LEGEND

The <fieldset> element is used to group related data on a form. The <legend> element defines a caption for the <fieldset> element.

  • DATALIST ELEMENT

The <datalist> element specifies a list of predefined options for an <input> element. Users will see a drop-down list of default options as they enter data. The list attribute of the <input> element must refer to the id attribute of the <datalist> element.

HTML INPUT ATTRIBUTES

  • The value attribute specifies an initial value for an input field
  • The readonly input attribute specifies that an input field is read-only. A read-only input field cannot be edited (however, a user can tab through it, highlight it, and copy its text). The value of a read-only input field will be sent when the form is submitted!
  • The input disabled attribute specifies that an input field should be disabled. A disabled input field is unusable and not clickable. The value will not be sent when the form is submitted!
  • The input size attribute specifies the visible width, in characters, of an input field. The default value for size is 20. Note: the size attribute works with the following types of input: text, search, tel, url, e-mail, and password
  • The maxlength input attribute specifies the maximum number of characters allowed in an input field
  • The min and max input attributes specify the minimum and maximum values ​​for an input field. The min and max attributes work with the following input types: number, range, date, datetime-local, month, time and week. Tip: Use the max and min attributes together to create a range of valid values
  • The multiple input attribute specifies that the user can enter more than one value in an input field. The multiple attribute works with the following types of inputs: email and file
  • The input placeholder attribute specifies a brief hint that describes the expected value of an input field (a sample value or a brief description of the expected format). The short tip appears in the entry field before the user enters a value. The placeholder attribute works with the following types of inputs: text, search, url, tel, e-mail, and password
  • The required input attribute specifies that an input field must be filled in before submitting the form. The required attribute works with the following types of inputs: text, search, url, tel, e-mail, password, date pickers, number, checkbox, radio, and file
  • The input step attribute specifies the number ranges for an input field. Example: if step = “3”, the numbers could be -3, 0, 3, 6, etc. Tip: This attribute can be used in conjunction with the max and min attributes to create a range of values. The step attribute works with the following input types: number, range, date, datetime-local, month, time and week
  • The input autofocus attribute specifies that a field should be automatically activated when the page is loaded
  • The autocomplete attribute specifies whether a form or input field should have autocomplete enabled or disabled. autocomplete allows the browser to predict the value. When a user starts typing in a field, the browser should display options for filling in the field, based on the previously typed values. The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, e-mail, password, datepickers, range, and color
Copy to Clipboard

LINKS TO PREVIOUS POST

PREVIOUS POST LINKS

LINK TO THE CODE ON GITHUB

GITHUB