HTML Form elements - 12 Tags and its Attributes (Reference)
Html
9
The HTML form elements are used to create a form in HTML. The form elements are used to collect data from the user.
Form and Input tags:
<form>
Defines an HTML form for user input. Wrapper for input/forms elements like input, textarea, button, select, option, optgroup, fieldset, label and output.
Attributes - accept-charset, action, autocomplete, enctype, method, name, novalidate, rel, target.
<form action="some_path" method="get">
// Input/form elements
</form>
<fieldset>
Groups related elements in a form. Used inside form tag. Attributes - disabled, form, name.
<form action="some_path">
<fieldset>// Input/form elements</fieldset>
</form>
<legend>
Defines a caption for a fieldset element. Used inside fieldset tag. Basically a border.
<form action="some_path">
<fieldset>
<legend>Some text</legend>
</fieldset>
</form>
<input>
The input tag is used to create an input field in an HTML form.
Attributes - accept, alt, autocomplete, autofocus, checked, dirname, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, type, value, width.
<input type="text" />
<input type="number" />
<input type="checkbox" />
<input type="radio" />
<input type="email" />
<input type="password" />
<input type="button" />
<input type="color" />
<input type="date" />
<input type="datetime-local" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="month" />
<input type="range" />
<input type="reset" />
<input type="search" />
<input type="submit" />
<input type="tel" />
<input type="time" />
<input type="url" />
<input type="week" />
<textarea>
Defines a multiline input control (text area). Attributes - autocomplete, autofocus, cols, dirname, disabled, form, maxlength, minlength, name, placeholder, readonly, required, rows, wrap.
<textarea rows="4" cols="50">
// Some text
</textarea>
<select>
Defines a drop-down list. Attributes - autofocus, disabled, form, multiple, name, required, size.
<select>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<optgroup>
Defines a group of related options in a drop-down list. Attributes - disabled, label.
<select>
<optgroup>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</optgroup>
<optgroup>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</optgroup>
</select>
<option>
Defines an option in a drop-down list. Attributes - disabled, label, selected, value.
<select>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<datalist>
Specifies a list of pre-defined options for input controls It is basically a Search and select.
<datalist>
<option value="one"> </option>
<option value="two"> </option>
<option value="three"> </option>
</datalist>
<button>
Defines a clickable button. Attributes - autofocus, disabled, form, formaction, formenctype, formmethod formnovalidate, formtarget, name, type, value.
<button>Button text</button>
<label>
Defines a label for an input element. Attributes - for, form.
<label for="some_id"> Some text </label>
<output>
Defines the result of a calculation. Attributes - for, form, name.
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="1" />
<input type="number" id="b" value="1" />
<output name="x" for="a b"></output>
</form>
Prev
8
9
2
8
5
9
2