Lesson 5.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:

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:

See also

• Web development class
• Lesson 1.1. History of the Internet
• Lesson 1.2 Introduction to HTML
• Lesson 1.3. Special characters in HTML
• Lesson 1.4. Comments in HTML
• Lesson 1.5. Global structure of HTML pages
• Lesson 1.6. Hyperlinks in HTML
• Lesson 1.7. ID attribute in HTML tags
• Lesson 1.8. HTML anchors
• Lesson 1.9. Images in HTML pages
• Lesson 1.10. HTML tables
• Lesson 1.11. Most used HTML tags
• Lesson 1.12. Some advice
• Lesson 1.13. Ressources
• Lesson 2.1. Introduction to CSS
• Lesson 2.2. Inline CSS
• Lesson 2.3. Internal CSS
• Lesson 2.4. External CSS
• Lesson 2.5. CSS selectors
• Lesson 2.6. CSS colors
• Lesson 2.7. Margin and padding
• Lesson 2.8. CSS units
• Lesson 2.9. Most used CSS properties
• Lesson 3.1. History of JavaScript
• Lesson 3.2. JavaScript Hello World
• Lesson 3.3. Console.log
• Lesson 3.4. Comments in JavaScript
• Lesson 3.5. Variables in JavaScript
• Lesson 3.6. JavaScript events
• Lesson 3.7. Document Object Model (DOM)
• Lesson 3.8. Changing HTML
• Lesson 3.8. JavaScript frameworks
• Lesson 4.1. Introduction to PHP
• Lesson 4.2. PHP tags
• Lesson 4.3. PHP variables
• Lesson 4.4. isset vs empty vs is_null
• Lesson 4.5. PHP operators
• Lesson 4.6. PHP quotes
• Lesson 4.7. Tests in PHP: if .. else
• Lesson 4.8. PHP arrays
• Lesson 4.9. PHP loops
• Lesson 4.10. PHP sessions
• Lesson 5.1. HTML forms
• Lesson 5.2. HTML forms, POST or GET?
• Lesson 5.3. Input fields
• Lesson 6.1. Introduction to MySQL
• Lesson 6.2. phpMyAdmin
• Lesson 6.3. SQL queries
• Lesson 6.4. Connect to MySQL in PHP
• Lesson 6.5. SQL queries in PHP
• Lesson 6.6. Getting data from MySQL in PHP
• Lesson 6.7. Get last ID

---