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

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

---