Your browser does not support JavaScript!
Upvotes Anonymous 0 User 0

Common HTML Elements (page 2 of 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?
The HTML page looks like this in the Firefox web browser:
Was this helpful?

Tags

Comments

Leave a Comment

I agree to the Terms of Service
Design © 2015, Downranked, LLC.,
Original user code contributions under MIT License