Form Examples (Back)

Input Types

• Button:

  
  Sample Code: <input type="button" name="button" value="This is a button" />
• Checkbox:

  Value 1

  Value 2

  
  Sample Code: <div>  <input type="checkbox" id="value_1" checked />  <label for="value_1">Value 1</label> </div> <div>  <input type="checkbox" id="value_2" />  <label for="value_2">Value 2</label> </div>
• Color:

  Value 3
  Sample Code: <input type="color" id="value_3" value="#446590" /> <label for="value_3">Value 3</label>
• Date:

  Start Date
  Sample Code: <input type="date" id="start_date" value="2024-07-07" min="2024-01-01" max="2024-12-31" /> <label for="start_date">Start Date</label>
• Datetime-local

  Meeting Date
  Sample Code: <input type="datetime-local" id="meeting_date" value="2024-06-12T19:30" min="2024-06-07T00:00" max="2024-06-14T00:00" /> <label for="meeting_date">Meeting Date</label>
• Email

  Enter your huxley.cloud email address
  Sample Code: <input type="email" pattern=".+@huxley\.cloud" id="email" size="30" placeholder="cloud@huxley.cloud" required/> <label for="email">Enter your huxley.cloud email address</label>
• File

  Choose image file(s) to upload
  Sample Code: <label for="file">Choose image file(s) to upload</label> <input type="file" accept="image/*,.pdf" id="file" multiple />
• Hidden

  
  Sample Code: <input type="hidden" id="hidden" value="34567" />
• Image

  
  Sample Code: <input type="image" id="image" alt="Login" src="../login-button.png" />
• Month

  Start month:
  Sample Code: <input type="month" id="start_month" min="2024-01" value="2024-05" />
• Number

  Pick a Number (10-100):
  Sample Code: <input type="number" id="pick-a-number" min="10" max="100" />
• Password

  Enter your password (at least 5 characters):
  Sample Code: <label for="pw">Enter your password (at least 5 characters):</label> <input type="password" id="pw" minlength="5" required />
• Radio

  Value 4

  Value 5

  Value 6

  
  Sample Code: <div> <input type="radio" id="value_4" name="value_field" value="value_4" checked /> <label for="value_4">Value 4</label> </div> <div> <input type="radio" id="value_5" name="value_field" value="value_5" /> <label for="value_5">Value 5</label> </div> <div> <input type="radio" id="value_6" name="value_field" value="value_6" /> <label for="value_6">Value 6</label> </div>
• Range

  Volume
  Sample Code: <input type="range" id="volume" min="0" max="11" value="5" /> <label for="volume">Volume</label>
• Reset

  
  Sample Code: <input type="reset" value="Reset" />
• Search

  Search the site: Search
  Sample Code: <label for="site-search">Search the site:</label> <input type="search" id="site-search" name="q" /> <button>Search</button>
• Submit

  
  Sample Code: <input type="submit" value="Send Request" />
• Tel

  Enter your phone number: Format: 123-456-7890
  Sample Code: <label for="phone">Enter your phone number:</label> <input type="tel" id="phone" pattern="[0-9]3-[0-9]3-[0-9]4" required /> <p>Format: 123-456-7890</p>
• Text:

  Text Label:
  Sample Code: <label for="text"> Text Label:</label> <input type="text" id="text" required minlength="4" maxlength="21" size="21" placeholder="This is not a drill." />
• Time

  Choose a time for your meeting: Office hours are 9am to 6pm
  Sample Code: <label for="appt">Choose a time for your meeting:</label> <input type="time" id="appt" name="appt" min="09:00" max="18:00" required /> <small>Office hours are 9am to 6pm</small>
• URL

  Enter an https:// URL:
  Sample Code: <label for="url">Enter an https:// URL:</label> <input type="url" name="url" id="url" placeholder="https://huxley.cloud/" pattern="https://.*" size="30" required />
• Week

  Choose a week in May or June:
  Sample Code: <label for="week">Choose a week in May or June:</label> <input type="week" id="week" min="2024-W18" max="2024-W26" required />

Misc. Form Elements

• <button>

  Another button
  Sample Code: <button>Another button</button>
• <datalist>

  Choose a flavor:
  Sample Code: <label for="ice-cream-choice">Choose a flavor:</label> <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" /> <datalist id="ice-cream-flavors"> <option value="Chocolate"></option> <option value="Coconut"></option> <option value="Mint"></option> <option value="Strawberry"></option> <option value="Vanilla"></option> </datalist>
• <meter>

  Battery level: at 50/100
  Sample Code: <label for="battery">Battery level:</label> <meter id="battery" min="0" max="100" low="33" high="66" optimum="80" value="50">at 50/100</meter>
• <output>

  + =

  60

  
  Sample Code: <form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" id="b" name="b" value="50" /> + <input type="number" id="a" name="a" value="10" /> = <output name="result" for="a b">60</output> </form>
• <optgroup>, <option> & <select>

  Choose a dinosaur: Tyrannosaurus Velociraptor Deinonychus Diplodocus Saltasaurus Apatosaurus
  Sample Code: <select id="dino-select"> <optgroup label="Theropods"> <option>Tyrannosaurus</option> <option>Velociraptor</option> <option>Deinonychus</option> </optgroup> <optgroup label="Sauropods"> <option>Diplodocus</option> <option>Saltasaurus</option> <option>Apatosaurus</option> </optgroup> </select>
  Please choose one or more pets: Dog Cat Hamster Parrot Macaw Albatross
  Sample Code: <label for="pets">Please choose one or more pets:</label> <select id="pets" multiple size="6"> <optgroup label="4-legged pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="hamster" disabled>Hamster</option> </optgroup> <optgroup label="Flying pets"> <option value="parrot">Parrot</option> <option value="macaw">Macaw</option> <option value="albatross">Albatross</option> </optgroup> </select>
• <progress>

  File progress: 70%
  Sample Code: <label for="file_progress">File progress:</label> <progress id="file_progress" max="100" value="70">70%</progress>
• <textarea>

  Share your wisdom: For the night is dark and full of terrors...
  Sample Code: <label for="textarea_blob">Share your wisdom:</label> <textarea id="textarea_blob" rows="5" cols="45"> For the night is dark and full of terrors... </textarea>

Form Element Attributes

• accept-charset
  • utf-8
• action
  • The URL that processes the form submission.
• autocomplete
  • off
  • on
• enctype

  If the value of the method attribute is post, enctype is the MIME type of the form submission. Possible values:

  • application/x-www-form-urlencoded: The default value.
  • multipart/form-data: Use this if the form contains <input> elements with type=file.
  • text/plain: Useful for debugging purposes.
• method
  • get
  • post
  • dialog
• name
  • Must not be the empty string, and must be unique among the form elements.
• novalidate
• rel
  • external
  • help
  • license
  • next
  • nofollow
  • noopener
  • noreferrer
  • opener
  • prev
  • search
• target
  • _blank
  • _parent
  • _self
  • _top