More Form widgets

Select Element

The select element is used for creating a drop-down list. A drop-down list provides a list of options from which a user can select his choice. The option element is used for providing the different options for the list. The value attribute of the selected option element is sent when the form is submitted. If a value is not provided then the content of option element is sent as value. By default, the first one is selected. If we want to select a particular option as the default option we can use the selected attribute.

<select name="languages">
    <option value="python">Python</option>
    <option value="java">Java</option>
    <option value="ruby">Ruby</option>
</select>

The empty attribute multiple can be used for denoting that multiple options can be selected.

<select name="languages" multiple>
    <option value="python">Python</option>
    <option value="java">Java</option>
    <option value="ruby">Ruby</option>
</select>

The optgroup element can be used for grouping a set of options. The label attribute is shown above the options.

<select name="countries">
  <optgroup label="asia">
    <option value="china">China</option>
    <option value="india">India</option>
  </optgroup>
  <optgroup label="europe">
    <option value="france">France</option>
    <option value="italy">Italy</option>
  </optgroup>
</select>

Datalist element

The datalist element is used for providing options when users begin to enter information in an input element. The options are specified using the option element. When a user selects an option from the drop down the value of the selected option is entered into the input element. In order to connect the datalist to the input element, an id attribute has to be provided for the datalist element. Then the input element must have a list attribute with the id value of the datalist.

<input type="text" list="language">
    <datalist id="language">
      <option value="python">
      <option value="java">
      <option value="ruby">
    </datalist>
</input>

Input Element cont.

  • The input element fallbacks to text type when no type is provided. There are some newer input types that may not be supported by all the browsers. In this case, those elements are displayed as a normal text input.
  • If the input element has the type of search, then it is styled differently than a normal text input based on the browser. Another advantage is that the browser remembers the previously searched keywords for the same website.
  • If the type is tel, then the mobile browsers may show the number pad for entering a telephone number.
  • If the type is url, then the browser checks if it is a well-formed URL. It will show an error if the entered text is not a valid URL.
  • If the type is checkbox, then the input element is displayed as a clickable checkbox. If no value is given then a value of on is returned. In order to make the checkbox selected, we can use the checked element.
  • If the type is number, then the browser restricts text to only numbers and adds selectors to the side. The minimum, maximum and step values can be provided using min, max, and step attributes.
  • If the type is range, then a slider widget is displayed that allows users to select a number. The min, max and step attributes are recommended for sliders. They don’t provide visual feedback and so JavaScript has to be used for displaying the value.
  • If the type is date, then a date picker tool is displayed to select a particular date. The minimum and maximum can be specified using min and max.
  • If the type is datetime, then a date picker tool is displayed to select a particular date and time. The minimum and maximum can be specified using min and max.
  • If the type is datetime-local, then a date picker tool is displayed to select a particular date and time in local time. The minimum and maximum can be specified using min and max.
  • If the type is month, then a date picker tool is displayed to select a particular month. The minimum and maximum can be specified using min and max.
  • If the type is week, then a date picker tool is displayed to select a particular week. The minimum and maximum can be specified using min and max.
  • If the type is time, then a date picker tool is displayed to select a particular time. The minimum and maximum can be specified using min and max.
  • If the type is color, then a color picker tool is displayed to select the color.
  • If the type if file, then a file picker tool allows the user to select a file. This is commonly used for file upload. If multiple files need to be sent then file attribute is selected. The accept attribute can be used for restricting the type of files selected.
  • If the type is hidden, then the input is not shown to the user but is in the source code. The value and name, in this case, are required.