HTML Form Elements






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



HTML Form Elements



❮ Previous
Next ❯


This chapter describes all HTML form elements.



The <input> Element


The most important form element is the <input> element.


The <input> element can be displayed in several ways, depending on the type
attribute.




Example



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

Try it Yourself »



If the type attribute is omitted, the input field gets the default type:
"text".



All
the different input types are covered in the next chapter.




The <select> Element


The <select> element defines a drop-down list:



Example



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

Try it Yourself »


The <option> elements defines an option that can be
selected.


By default, the first item in the drop-down list is selected.


To define a pre-selected option, add the selected attribute
to the option:



Example



<option value="fiat" selected>Fiat</option>

Try it Yourself »


Visible Values:


Use the size attribute to specify the number of visible values:



Example



<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>

Try it Yourself »


Allow Multiple Selections:


Use the multiple attribute to allow the user to select more than one value:



Example



<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>

Try it Yourself »



The <textarea> Element


The <textarea> element defines a multi-line input field (a text area):



Example



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

Try it Yourself »


The rows attribute specifies the visible number of lines in
a text area.


The cols attribute specifies the visible width of a text
area.


This is how the HTML code above will be displayed in a browser:


You can also define the size of the text area by using CSS:



Example



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

Try it Yourself »






<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->




The <button> Element


The <button> element defines a clickable button:



Example



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

Try it Yourself »


This is how the HTML code above will be displayed in a browser:





Note: Always specify the type attribute for the button element. Different browsers may use different default types for the button element.





HTML5 Form Elements


HTML5 added the following form elements:



  • <datalist>

  • <output>



Note: Browsers do not display unknown elements. New elements
that are not supported in older browsers will not "destroy" your web page.





HTML5 <datalist> Element


The <datalist> element specifies a list of pre-defined options for an <input> element.


Users will see a drop-down list of the pre-defined options as they input data.


The list attribute of the <input> element, must refer to the
id attribute of the <datalist> element.



OperaSafariChromeFirefoxInternet Explorer

Example




<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>

Try it Yourself »


HTML5 <output> Element


The <output> element represents the result of a calculation (like one
performed by a script).



OperaSafariChromeFirefoxInternet Explorer

Example


Perform a calculation and show the result in an <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>

Try it Yourself »


Test Yourself with Exercises!



Exercise 1 »  
Exercise 2 »  
Exercise 3 »



HTML Form Elements


=
new in HTML5.























































TagDescription
<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



❮ Previous
Next ❯

-

Popular posts from this blog

HTML5 Browser Support

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> HTML5 Browser Support ❮ Previous Next ❯ You can teach older browsers to handle HTML5 correctly. HTML5 Browser Support HTML5 is supported in all modern browsers. In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements. Because of this, you can "teach" older browsers to handle "unknown" HTML elements. You can even teach IE6 (Windows XP 2001) how to handle unknown HTML elements. Define Semantic Elements as Block Elements HTML5 defines eight new semantic elements. All these are block-level elements. To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block : header, section, footer, aside, nav, main, article, figure {     display: block; } Add New Elements to HTML You can also add new elements to an HTML page with a browser trick. This example adds a ne...
Read more

CSS Box Sizing

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> CSS Box Sizing ❮ Previous Next ❯ CSS Box Sizing The CSS box-sizing property allows us to include the padding and border in an element's total width and height. Without the CSS box-sizing Property By default, the width and height of an element is calculated like this: width + padding + border = actual width of an element height + padding + border = actual height of an element This means: When you set the width/height of an element, the element often appear bigger than you have set (because the element's border and padding are added to the element's specified width/height). The following illustration shows two <div> elements with the same specified width and height: This div is smaller (width is 300px and height is 100px). This div is bigger (width is also 300px and height is 100px). The two <div> elements above end up with different sizes in the re...
Read more

SVG Filters

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> SVG Filters ❮ Previous Next ❯ SVG Filters SVG Filters are used to add special effects to SVG graphics. Browser Support The numbers in the table specify the first browser version that supports SVG filters.   SVG Filters 8.0 10.0 3.0 6.0 9.6 SVG Filter Elements In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG. The available filter elements in SVG are: <feBlend> - filter for combining images <feColorMatrix> - filter for color transforms <feComponentTransfer> <feComposite> <feConvolveMatrix> <feDiffuseLighting> <feDisplacementMap> <feFlood> <feGaussianBlur> <feImage> <feMerge> <feMorphology> <feOffset> - filter for drop sh...
Read more