Practical Exercise 8: Form with Select and Radio Fields

Learn to create an HTML form with select and radio fields. Discover how to use <select> tags and <input type="radio"> buttons, as well as <optgroup> and <textarea>.

Activity

Add <select> fields and <input type="radio"> buttons to the previous form.

Interactive Solution

AI PlatformTurn Code into Customers.Try it free

Solution with Complete HTML Code

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form with Select and Radio</title>
  </head>
  <body>
    <h1>Form</h1>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" />
      <br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <br />
      <label for="gender">Gender:</label>
      <input type="radio" id="male" name="gender" value="male" />
      Male
      <input type="radio" id="female" name="gender" value="female" />
      Female
      <br />
      <label for="country">Country:</label>
      <select id="country" name="country">
        <option value="usa">United States</option>
        <option value="canada">Canada</option>
        <option value="mexico">Mexico</option>
      </select>
      <br />
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

Exercise Variants

Variant 1: Select with `<optgroup>` for Categorizing Options

When you have many options in a <select>, <optgroup> allows grouping them by category.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Select with Optgroup</title>
  </head>
  <body>
    <h1>Select Your City</h1>
    <form>
      <label for="city">City:</label>
      <select id="city" name="city" required>
        <optgroup label="United States">
          <option value="new-york">New York</option>
          <option value="los-angeles">Los Angeles</option>
          <option value="chicago">Chicago</option>
        </optgroup>
        <optgroup label="Canada">
          <option value="toronto">Toronto</option>
          <option value="vancouver">Vancouver</option>
        </optgroup>
        <optgroup label="Mexico">
          <option value="mexico-city">Mexico City</option>
          <option value="guadalajara">Guadalajara</option>
        </optgroup>
      </select>
      <br /><br />
      <button type="submit">Send</button>
    </form>
  </body>
</html>

optgroup adds non-selectable headers that visually organize options within the dropdown.

Variant 2: Radio Buttons with Preselected Option

The checked attribute marks a default option. All radio buttons in the same group must share the same name.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Radio Buttons</title>
  </head>
  <body>
    <h1>Quick Survey</h1>
    <form>
      <p>What is your programming experience level?</p>
      <input type="radio" id="beginner" name="experience" value="beginner" checked />
      <label for="beginner">Beginner</label><br />
      <input type="radio" id="intermediate" name="experience" value="intermediate" />
      <label for="intermediate">Intermediate</label><br />
      <input type="radio" id="advanced" name="experience" value="advanced" />
      <label for="advanced">Advanced</label><br />
      <input type="radio" id="expert" name="experience" value="expert" />
      <label for="expert">Expert</label>
      <br /><br />

      <p>Would you recommend this course?</p>
      <input type="radio" id="yes" name="recommend" value="yes" checked />
      <label for="yes">Yes</label>
      <input type="radio" id="no" name="recommend" value="no" />
      <label for="no">No</label>
      <input type="radio" id="maybe" name="recommend" value="maybe" />
      <label for="maybe">Maybe</label>
      <br /><br />
      <button type="submit">Submit Survey</button>
    </form>
  </body>
</html>

Key rule: radio buttons belonging to the same group must have identical name. This ensures only one can be selected at a time. value is what gets sent to the server.

Variant 3: `<textarea>` for Multiline Comments

For long text fields like comments or biographies, use <textarea> instead of <input type="text">.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form with Textarea</title>
  </head>
  <body>
    <h1>Leave Your Feedback</h1>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required />
      <br /><br />

      <label for="rating">Rating:</label>
      <select id="rating" name="rating">
        <option value="5">5 - Excellent</option>
        <option value="4">4 - Very Good</option>
        <option value="3">3 - Good</option>
        <option value="2">2 - Fair</option>
        <option value="1">1 - Poor</option>
      </select>
      <br /><br />

      <label for="comment">Comment:</label><br />
      <textarea
        id="comment"
        name="comment"
        rows="5"
        cols="50"
        placeholder="Write your feedback here..."
        maxlength="500"
      ></textarea>
      <br /><br />

      <button type="submit">Submit Feedback</button>
    </form>
  </body>
</html>

rows and cols: define the visible area size (rows x character columns).
maxlength: character limit.
placeholder: guide text that disappears when typing.
Unlike <input>, <textarea> has a closing tag </textarea>.

Mini-Challenge: Put It to the Test

Create a survey form containing:

Name (<input type="text">)
Country (<select> with at least 6 options grouped in 2 <optgroup>)
Gender (3 radio buttons with name="gender", one preselected with checked)
Comments (<textarea> with rows, cols, and placeholder)
All fields must have their <label> associated

Try to build it completely without looking at the examples. If you get stuck, go back to the variant you need.

Common Mistakes with Select and Radio Buttons

Mistake	Why It's a Problem
Radio buttons without a shared `name`	Multiple can be selected at once. Radios in the same group must have the identical `name`
Forgetting the `value` attribute on radio buttons	The server receives `on` instead of the actual value. Always define `value`
Using `selected` instead of `checked`	`selected` is for `<option>`, `checked` is for radio and checkbox. They are different attributes
Not setting a default option in select	The first option is automatically selected, but if it's not a valid choice (e.g., "Select...") it may send incorrect data
`<textarea>` without a closing tag	Unlike `<input>`, `<textarea>` is not self-closing: it requires `</textarea>`

Frequently Asked Questions

When should I use radio buttons vs select?

Use radio buttons when you have few options (2 to 5) and want the user to see them all at a glance (e.g., gender, yes/no, level). Use <select> when you have many options (6+) or when space is limited (e.g., country, city, birth year). The key is visibility vs space economy.

Can I have multiple `<select>` elements in the same form?

Yes, and it's very common. Each <select> must have a unique name so the server can identify which data corresponds to each field. You can also use the multiple attribute to allow selecting several options with Ctrl/Cmd.

info

📝 Keep learning about this topic here 👉 Creating HTML Forms

Practical Exercise 8: Form with Select and Radio Fields

Activity​

Interactive Solution​

Solution with Complete HTML Code​

Exercise Variants​

Variant 1: Select with <optgroup> for Categorizing Options​

Variant 2: Radio Buttons with Preselected Option​

Variant 3: <textarea> for Multiline Comments​

Mini-Challenge: Put It to the Test​

Common Mistakes with Select and Radio Buttons​

Frequently Asked Questions​

When should I use radio buttons vs select?​

Can I have multiple <select> elements in the same form?​