WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML Form Elements


In this chapter we learn all HTML form elements.


The <input> Element

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

The <input> element are very useful, depending on the type attribute.


The <select> Element (Drop-Down List)

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

Example

<select name="color">
  <option value="Red">Red</option>
  <option value="Blue">Blue</option>
  <option value="Green">Green</option>
  <option value="Yellow">Yellow</option>
</select>
Try it Yourself »

The <option> elements are used to select options .

Given list you can select one item

You can add a selected attribute to state a predefined option.

Example

<option value="green" selected>green</option>
Try it Yourself »

The <textarea> Element

The <textarea> element is called a multi-line input field a text area:

Example

<textarea name="message" rows="10" cols="30">
Never be the same
</textarea>
Try it Yourself »

This is look in browsers:



The <button> Element

The <button> element defines a clickable button:

Example

<button type="button" onclick="alert('Hello World!')">Click Here !</button>
Try it Yourself »

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



HTML5 Form Elements

HTML5 added the following form elements:

  • <datalist>
  • <keygen>
  • <output>

when you default browser do not display unknown element .New element will not destroyed your 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 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

An <input> element with pre-defined values in a <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>
Try it Yourself »

HTML5 <keygen> Element

<keygen> element is to provide a secure way to authenticate users.

The <keygen> element specifies a key-pair generator field in a form.

When the form is submitted, two keys are generated, one private and one public.

The private key is stored locally, and the public key is sent to the server.

The public key could be used to generate a client certificate to authenticate the user in the future.

OperaSafariChromeFirefoxInternet Explorer

Example

A form with a password field:

<form action="action_page.php">
  Username: <input type="text" name="user">
  password: <password name="pass"> <input type="text">
  <input type="submit">
</form>
Try it Yourself »

HTML5 <output> Element

The <output> element represent the result perform like script.

OperaSafariChromeFirefoxInternet Explorer

Example

Perform a calculation and show the result in an <output> element:

<form action="action_page.asp"
  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 »


HTML Form Elements

= new in HTML5.

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