Building Forms

Initializing a Form

<form action="/login" method="post">
  ...</form>

Text Fields & Textareas

Text Fields

<input type="text" name="username">

Textarea

<textarea name="comment">Add your comment here</textarea>

Multiple Choice Inputs & Menus

Radio Buttons

<input type="radio" name="day" value="Friday" checked> Friday<input type="radio" name="day" value="Saturday"> Saturday<input type="radio" name="day" value="Sunday"> Sunday

Check Boxes

<input type="checkbox" name="day" value="Friday" checked> Friday<input type="checkbox" name="day" value="Saturday"> Saturday<input type="checkbox" name="day" value="Sunday"> Sunday

Drop-Down Lists

<select name="day">
  <option value="Friday" selected>Friday</option>
  <option value="Saturday">Saturday</option>
  <option value="Sunday">Sunday</option></select>

Multiple Selections

<select name="day" multiple>
  <option value="Friday" selected>Friday</option>
  <option value="Saturday">Saturday</option>
  <option value="Sunday">Sunday</option></select>

Form Buttons

Submit Input

<input type="submit" name="submit" value="Send">

Hidden Input

<input type="hidden" name="tracking-code" value="abc-123">

File Input

<input type="file" name="file">

Organizing Form Elements

Label

<label for="username">Username</label><input type="text" name="username" id="username">

Fieldset

<fieldset>
  <legend>Login</legend>
  <label>
    Username    <input type="text" name="username">
  </label>
  <label>
    Password    <input type="text" name="password">
  </label></fieldset>

Form & Input Attributes

Disabled

<label>
  Username  <input type="text" name="username" disabled></label>

Placeholder

<label>
  Email Address  <input type="email" name="email-address" placeholder="[email protected]"></label>

Required

<label>
  Email Address  <input type="email" name="email-address" required></label>

Additional Attributes

• autofocus
  

• readonly