Forms

<form>

<form> - form root element. it contains form fields and is used for submitting data

action - contains path where request will be sent. once sent, user is redirected to the entered path

  • /index.html - default path


method - HTTP-Method. there are three possible values

  • GET - default. input values will be set as query params
  • POST
  • dialog - is used for the form inside a <dialog>


enctype - for method="POST" enctype defines the MIME type of the form submission

  • application/x-www-form-urlencoded - default. field values will be sent as query params
  • multipart/form-data - send as payload. should be used for forms with binary data, i.e. forms with files


autocomplete - indicates whether browser can automatically complete input values

  • off - no
  • on - yes, based on values that the user has entered before
  • it works with the following input types: text, search, url, tel, email, password, date, range, color
  • it is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa


novalidate - specifies that the form shouldn't be validated on submit. this is boolean attribute

Common Attributes

name - is a key for the field value, which will be sent to a server. must be unique and non-empty

  • only form elements with a name attribute will have their values passed when submitting a form
  • name can also be set on <form> element. in HTML4 it is called "id"
  • field names' scope is restricted to the form they belong to. so fields within different forms can have same name
  • names can also be used to reference form elements from JS


value - specifies field value, which will be sent to a server

  • for <input> specifies initial value. it is being copied to DOM "value" property, edited by user and later sent to a server

<input>

<input> - a set of interactive controls, used to accept data from the user

Types

text - default input type
number

checkbox

radio

  • to combine radios into one group they should have same name


button
submit
reset - resets all the fields to their initial values

  • these are analogs of <button>. unlike in <button>, button label is written into the "value" attribute


email - provides email pattern
password - input is hidden with asterisks

  • when browser back button is clicked, password input will be reset

tel - functionally identical to standard text input

  • mobile browsers might present a custom keypad optimized for entering phone numbers

url - provides URL pattern
search - is used for search fields. behaves like a regular text input

date - adds default browser date picker

  • e.g. max="2002-01-01"

month

week

time - no time zone
datetime-local - no time zone

file

  • see accept attribute

range - this is a slider control

  • default range is 0 to 100
  • restrictions on what numbers are accepted can be set with the min, max, and step attributes

color - provides user interface that lets user choosing a color
hidden - input, which cannot be seen and modified by users, but will be sent on form submit

  • e.g.
  • unique security token, which is used to prevent CSRF attack
  • ID of the content that is currently being edited

Attributes

type - required. it specifies the type of input

name - required

value - it is optional for most inputs, but required for button types
checked - specifies initial value for checkbox & radio

  • :checked - pseudo-class


placeholder - text which is displayed inside input when it is empty

  • supporting types: text, email, password, tel, url, search


disabled - makes input not clickable and not editable, and its value will not be sent on form submit

  • :disabled & :enabled - pseudo-classes

readonly - makes input not clickable and not editable, but its value will be sent on form submit

required - is used for validation. marks required inputs

  • supporting types: text, number, checkbox, radio, email, password, tel, url, search, date, file
  • :empty - pseudo-class

pattern - specific pattern for an input value

  • :valid & :invalid - pseudo-classes

minlength - specifies the minimum amount of characters for an input
maxlength - specifies the maximum amount of characters for an input

min - minimum number
max - maximum number

  • supporting types: number, date, month, week, time, datetime-local, range

step - specifies the interval

  • e.g. for step="3" legal numbers are -3, 0, 3, 6, etc.
  • can be used together with the max and min attributes to create a range of legal values
  • supporting types: number, date, month, week, time, datetime-local, range


size - specifies the width of an input in characters

multiple - specifies that the user is allowed to enter more than one value in the input

  • supporting types: email, file


accept - lists comma-separated MIME types or extensions, allowed to be uploaded

  • e.g. accept="image/png, image/jpeg"
  • files with extensions which are not listed will be disabled in OS file picker
  • however Windows allows disabling this restriction. in the case when file format restriction is crucial, the use of JS validation should be considered
  • supporting type: file


autocomplete - provide hints about what kind of information is expected. browser will provide a list of options

  • e.g. name, tel, cc-number, etc.


autofocus - specifies that the input should automatically get focus when the page loads

form - specifies one or more forms an input belongs to. contains form ID

Other Elements

<label> - label for a field. usually <label> wraps the field, what makes the field linked with the label. afterwards, on label click field is activated

  • for="field id" - alternative to wrapping, same functionality. empty string is default value
  • when wrapping is combined with "for", "for" overwrites wrapping logic


<button>

  • e.g. <button>Click me</button>
  • type - submit, button or reset. submit is default type
  • disabled


<textarea> - scrollable input

  • e.g. <textarea>User input will be here</textarea>
  • rows - specifies the visible number of lines in a text area. e.g. rows="10"
  • cols - specifies the visible width of a text area. e.g. cols="30"
  • does not support "value" attribute


<select> - menu with options

  • size - defines the number of visible options in a drop-down list. e.g. size="3"
  • multiple - specifies that multiple options can be selected

<option> - element for single option

  • selected - is used to pre-select an option

<optgroup> - wraps a group of related options and defines them in a drop-down list. it is optional

<select name="cloud">
  <option value="">Choose</option>
  <option value="cirrus">Cirrus</option>
  <option value="stratus">Stratus</option>
  <option value="cimulus">Cimulus</option>
</select>

<datalist> - specifies a list of pre-defined options for an input element. they are displayed in browser drop-down, like used emails

  • this also enables search within listed options, since they are filtered on user input
  • it is offered with HTML5
<input type="text" name="cloud" list="clouds" />
<datalist id="clouds">
  <option value="cirrus" />
  <option value="stratus" />
  <option value="cimulus" />
</datalist>
;