HTML: Input Elements


input firstname

<input name="firstname" type="text">

 


select cars

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

 

 


 

Select Option with size=

<select name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

 

 


Select Allow Multiple Selections

<select name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

 

 

 

 


TextArea

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

 

 


 

TextArea size via CSS

<textarea name="message" style="width:200px; height:600px">
The cat was playing in the garden.
</textarea>

 

 

 


Buttons

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

 

 


HTML5 DataList

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

 

 


 

HTML5 Output Element

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)"
>

  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

 

0 100 + =

 

 


 

HTML Form Elements at w3schools.com

HTML Form Elements

= new in HTML5.

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation

 


 

 

 

 

Tags