FriconiX
Free collection of beautiful vector icons for your web pages.

Lesson 4.4. HTML form fields

Checkbox

The check boxes allows the user to check a box (yes or no):

<input type="checkbox" id="spams" name="newsletter" checked>
<label for="spams">Are you agree for receiving a lot of spams?</label>

Dropdown list

Drop-down lists allow the user to select a single choice from a list:

<select name="day" size="1">
  <option value="1">Monday</option>
  <option value="2">Tuesday</option>
  <option value="3">Wednesday</option>
  <option value="4">Thersday</option>
  <option value="5" selected="selected">Friday</option>
</select>

Radio button

Radio buttons allow the user to select a single choice among many:

<input type="radio" name="prefix" value="Mr" checked> Mr<br>
<input type="radio" name="prefix" value="Mrs"> Mrs<br>
<input type="radio" name="prefix" value="Miss"> Miss

Text area

The field <input type="text"> allows the entry of only one line. The tag <textarea> allows the entry of a text on several lines:

<label for="message">Your message :</label><br>
<textarea id="message" name="message" rows="10" cols="33">
Default entry
</textarea>

Exercice

Write the HTML code allowing the user to enter his email and a comment as on the following example:

Input form for comments

The processing script must check that the user has entered the fields email and comment before displaying the data received in a table as in the following example:

Processing of the comment form

See also


Last update : 01/29/2020