Html Forms(8th Lesson)

8th Lesson


HTML Forms

The <input> Element

he most important form element is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.

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

The <select> Element

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

Example

<select name="month">
  <option value="jan">jan</option>
  <option value="feb">feb</option>
  <option value="mar">mar</option>
  <option value="april">april</option>
</select>

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="jan" selected>jan</option>

The <textarea> Element

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

Example

<textarea name="message" rows="10" cols="30">

</textarea>

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:


The <button> Element

The <button> element defines a clickable button:

Example

<button type="button" onclick="alert('submited!')">submit!</button>

HTML Form Elements


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
<keygen>Defines a key-pair generator field (for forms)
<output>Defines the result of a calculation