January 30, 2024 by admin
HTML/CSS Reference for DMET 155/355
HTML5 Forms Pt. 2: Attributes and Data Lists
Continuing from HTML5 Forms Pt. 1, in addition to the multitude of fresh new input types, there are also additional form-specific attributes at your disposal as well as data lists, a sort of text/select hybrid.
More attributes
As well as those attributes mentioned, both here and in earlier guides, there is a handful of additional attributes:
Placeholder text
The placeholder attribute can be used with text input fields (and their text-like cousins, such as type="email" and type="number") as well as textarea elements. It is intended as a hint, rather than a label, for which a label element should still be used.
<label for="email_address">Email address</label>
<input type="email" placeholder="[email protected]" name="email_address" id="email_address">
Autofocus
You might want focus to land on a form field when a page loads. If you think of a search engine, for example, when you land on its home page you don’t normally need to click on the search box to start typing – you can do so straight away because it already has focus. The autofocus attribute is a quick way to achieve this effect.
<input name="query" autofocus>
Data lists
A data list takes the form of a list of suggestions that accompanies a text field:
<input name="country" list="country_name">
<datalist id="country_name">
<option value="Afghanistan">
<option value="Albania">
<option value="Algeria">
<option value="Andorra">
<option value="Armenia">
<option value="Australia">
<option value="Austria">
<option value="Azerbaijan">
<!-- etc. -->
</datalist>
The value of the list attribute in the input element (which could be any of the text-like input types) binds it to a datalist element with the corresponding ID (“country_name”, in this example). As a user types in the text field, if what they type matches the start of anything in the data list, those matches will be shown underneath the text field as suggestions. So, here, if “A” is typed, the 8 countries beginning with “a” are displayed. If “L” is typed after “A”, the list of suggestions will reduce to just “Albania” and “Algeria”, and so on. The data sent when the form is submitted will be whatever is in the text field – it could be something selected from the list or it could be something completely different, inputted by the user.
The good news is that many of the features outlined in these two HTML 5 Forms pages degrade gracefully. Those browsers that don’t support data lists still maintain the text box; unrecognised input types revert to text inputs, so you can use the likes of search, tel, and url as long as you aren’t relying on their special features; placeholder text simply won’t appear so as long as it isn’t essential, go for it.
User Name Password
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text and password inputs</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Text and Password</legend>
<label for="username">Username:</label>
<input name="username" id="username" value="Some Text">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="Password">
</fieldset>
</form>
</body>
</html>Checkboxes and Radio Buttons
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox and radio inputs</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
label {
float: left;
width: 6em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Films you like</legend>
<div>
<label for="drama">Drama</label>
<input type="checkbox" name="drama" id="drama" value="drama">
</div>
<div>
<label for="action">Action</label>
<input type="checkbox" name="action" id="action" value="action">
</div>
<div>
<label for="comedy">Comedy</label>
<input type="checkbox" name="comedy" id="comedy" value="comedy">
</div>
<div>
<label for="horror">Horror</label>
<input type="checkbox" name="horror" id="horror" value="horror">
</div>
<div>
<label for="scifi">Sci-fi</label>
<input type="checkbox" name="scifi" id="scifi" value="scifi">
</div>
</fieldset>
<fieldset>
<legend>Your age</legend>
<div>
<label for="lt20">19 or under</label>
<input type="radio" name="age" id="lt20" value="lt20">
</div>
<div>
<label for="20to39">20 to 39</label>
<input type="radio" name="age" id="20to39" value="20to39">
</div>
<div>
<label for="40to59">40 to 59</label>
<input type="radio" name="age" id="40to59" value="40to59">
</div>
<div>
<label for="gt59">60 or over</label>
<input type="radio" name="age" id="gt59" value="gt59">
</div>
</fieldset>
</form>
</body>
</html>File Submissions
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>File inputs</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
</style>
</head>
<body>
<form action="someplace.php" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Upload file</legend>
<label for="uploadfile">File name: </label>
<input type="file" name="uploadfile" id="uploadfile">
</fieldset>
</form>
</body>
</html>Text Area
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text areas</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
label {
float: left;
clear: left;
width: 7em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Contact us</legend>
<div>
<label for="name">Name: </label>
<input name="name" id="name">
</div>
<div>
<label for="email">Email address: </label>
<input name="email" id="email">
</div>
<div>
<label for="message">Message: </label>
<textarea rows="10" cols="40" name="message" id="message"></textarea>
</div>
</fieldset>
</form>
</body>
</html>Select Box
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Select menus</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Favourite book</legend>
<label for="book">Name: </label>
<select name="book" id="book">
<option>The Trial</option>
<option>The Outsider</option>
<option>Things Fall Apart</option>
<option>Animal Farm</option>
</select>
</fieldset>
</form>
</body>
</html>Select: Optgroup Element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Select menus: option groups</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Favourite book</legend>
<label for="book">Name: </label>
<select name="book" id="book">
<optgroup label="Camus">
<option>The Outsider</option>
<option>The Rebel</option>
<option>The Plague</option>
</optgroup>
<optgroup label="Orwell">
<option>Animal Farm</option>
<option>Nineteen Eighty-Four</option>
<option>Down and Out in Paris and London</option>
</optgroup>
</select>
</fieldset>
</form>
</body>
</html>Multiple Selection Boxes
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Select menus: multiple selections</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Favourite book</legend>
<label for="book">Name: </label>
<select name="book" id="book" size="5" multiple="multiple">
<option>The Outsider</option>
<option>The Rebel</option>
<option>The Plague</option>
<option>Things Fall Apart</option>
<option>Animal Farm</option>
<option>Nineteen Eighty-Four</option>
<option>Down and Out in Paris and London</option>
</select>
</fieldset>
</form>
<!-- Link back to HTML Dog: -->
<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>