HTML Form Elements

<input> Element

This element displayed in different ways depend on type. Type may be text,password,email,number,checkbox,radio button,file or button etc.

Example:-

<form>Name :<input type="text" name="name">

Note: If type is forgeted, negeleted, leaved or not given, default type will be text.

Output:-

<select> Element

This element displayed in drop down list. The option element is used to show list.

Example:-

<label>Fever Medicine :</label><select name="medicine"> <option value="panadol">Panadol</option> <option value="paracetamol">Paracetamol</option> <option value="brofin">Brofin</option> </select>

Note: By default first element in drop down list will be selected.

Output:-

To select predefined option add selected attribute in option.

Example:-

<label>Fever Medicine :</label><select name="medicine"> <option value="panadol">Panadol</option> <option value="paracetamol" selected>Paracetamol</option> <option value="brofin">Brofin</option> </select>

Output:-

Visible Options

You can visible any number of options by size attribute.

Example:-

<label>Fever Medicine :</label><select name="medicine" size="2"> <option value="panadol">Panadol</option> <option value="paracetamol">Paracetamol</option> <option value="brofin">Brofin</option> </select>

Output:-

Multiple Selection

You can select multiple options by multiple attribute.

Example:-

<label>Fever Medicine :</label><select name="medicine" multiple> <option value="panadol">Panadol</option> <option value="paracetamol">Paracetamol</option> <option value="brofin">Brofin</option> </select>

Output:-

Tip Ctrl+Alt+click right mouse button options to select.

<textarea> Element

Textarea element is much like the text input field but textarea allows for multiple rows of data to be shown and entered.

<form><textarea rows="3" cols="70" name="description" >Enter description here...</textarea> </from>

row attribute is to show number of rows in that area. cols attribute is to show width of that area.

Output:-

<datalist> Element

It defines predefined option for an input.

Example:-

<label>Fever Medicine :</label><input list="medicine"> <datalist id="medicine"> <option value="Panadol"> <option value="Paracetamol"> <option value="Calpol"> </datalist>

Output:-