Common HTML Elements 2

Here's a page with very common form HTML elements:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>

<label for="firstname">Name</label>
<input type="text" id="firstname"/><br/>

<input type="radio" name="radiogroup1">
<input type="radio" name="radiogroup1">
<input type="radio" name="radiogroup1"><br/>

<input type="checkbox"><br/>

<button>Submit</button><br/>

<textarea rows="20" cols="40"></textarea><br/>

<select>
  <option value="1">Banana</option>
  <option value="2">Apple</option>
  <option value="3">Peach</option>
</select>

<select multiple>
  <option value="4">Bob</option>
  <option value="5">Amy</option>
  <option value="6">Tim</option>
</select>

</body>
</html>

What does each element do?

<label for="firstname"> A text label that corresponds to the text input with the id firstname
<input type="text" id="firstname"/> A (single-line) text input field
<input type="radio" name="radiogroup1"> A radio button in a group called radiogroup1 (only one radio option can be chosen, per group)
<input type="checkbox"> Checkbox
<button> Creates a button
<textarea rows="20" cols="40"> Multi-line text field
<select> Drop-down box (options are needed)
<option> Drop-down option with a value (the user does not see the value, and it is often a numeric identifier) and text
<select multiple> A select box where all options are shown, and multiple can be selected at once (ctrl-click)

What does it look like in Firefox?

controls on a web page

Comments

Leave a comment

What color are green eyes? (spam prevention)
Submit
Code under MIT License unless otherwise indicated.
© 2020, Downranked, LLC.