Subscribe to andrewsw's Blog
Leave Comment
The purpose of the HTML page below is simply to gather (nearly) all the HTML and HTML5 form elements and attributes in one place for ease of reference.
There are some useful notes as well, you'll find it easier to read these notes if you display the page.
Some links:
HTML element reference :MDN
<input> :MDN
Forms :whatwg
Dive Into HTML5
:valid :invalid and :required CSS pseudo-classes can be used to style elements.
This is mainly for my own reference but I thought others might find it useful.
If you think I've missed something then let me know and I might edit the page.
- There is no CSS.
- I have omitted some obscure or unsupported elements and attributes.
- Not every attribute for every element is demonstrated. For example, pattern is demonstrated once but can be used with a number of elements (email, url, etc.).
There are some useful notes as well, you'll find it easier to read these notes if you display the page.
Some links:
HTML element reference :MDN
<input> :MDN
Forms :whatwg
Dive Into HTML5
:valid :invalid and :required CSS pseudo-classes can be used to style elements.
This is mainly for my own reference but I thought others might find it useful.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Form</title>
</head>
<body>
<h1>Demonstrating HTML5 Form Elements and Attributes</h1>
<p>The <b>name</b> attribute of a form is deprecated. Give the form a (unique) <b>id</b> so that
you can refer to it in Javascript. (Give it an id even if you don't think you will need it.)</p>
<p>Use CSS to format the form; for example, if you wish to give it a border. Or you could insert
the form into a DIV, or wrap all of the form-elements in another <i>fieldset</i>. Note that
if you add a DIV-wrapper, but this DIV only contains the form, then the DIV is probably
unnecessary. cf. <i>divitis</i></p>
<p>People often place a <b>table</b> inside a form to help lay it out. That's fine (but not always
necessary). Remember to place the table inside the form. Forms can contain any elements, not
just form controls. Tables can only contain table-elements as children: tr, tbody, etc..</p>
<form id="frmPersonal" action="process.php" method="POST">
<fieldset>
<legend>Text Inputs, incl. Password and Search:</legend>
<p><b>Labels</b> are intended to do just that, to <i>label</i> a form element. They can either be
separate (but near to) the element, or contain the element. If used separately their <b>for</b>
attribute is used to associate them with a specific control using its <b>id</b>. Note that it
uses an id, not the element-name.</p>
<p>Note that the decision as to whether to separate, or to wrap, a label is usually based on the
CSS formatting that can be applied to the label and its control.</p>
<label>First Name: <input type="text" name="firstName" size="20"
autofocus maxlength="30" required></label>
<!-- the second way to use a label, using id: -->
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName" size="20" maxlength="30" placeholder="not required">
<label>Password: <input type="password" name="password" maxlength="20" tabindex="2"></label>
<p>This password-input has a <b>tabindex</b> of 2 but because none of the other elements have
a tabindex set it is actually tabbed-into after all the other controls.</b>
<p><b>maxlength</b>, and <b>minlength</b> can be applied to text, password, search, tel, email,
url inputs, as well as to a textarea. <b>size</b> can also be applied to these inputs.</p>
<label>Search: <input type="search" name="search"> (line-breaks are automatically removed)</label>
<p>The following uses the <b>pattern</b> attribute - a regular exp ression - to require
a three letter, then two number, code.</p>
<label><b>Pattern</b> attribute: <input type="text" name="codeNo" pattern="[A-Za-z]{3}\d{2}"></label>
<p>The pattern attribute works with the following input types: text, search, url, tel, email,
and password. It isn't supported by Safari or by IE9 or earlier.</p>
</fieldset>
<fieldset>
<legend>Contact (tel/email/url):</legend>
<label>Telephone: <input type="tel" name="telephone"></label>
<label>Email(s): <input type="email" name="email" multiple></label>
<label>Web Site: <input type="url" name="website"></label>
</fieldset>
<fieldset>
<legend>Payment (radio buttons):</legend>
<label>Credit Card <input type="radio" name="payment" value="ccard" checked></label>
<label>Debit Card <input type="radio" name="payment" value="dcard"></label>
<label>PayPal <input type="radio" name="payment" value="ppal"></label>
<p>These all share the same <b>name</b> so only one can be chosen. Only one
<b>value</b> will be submitted.</p>
<p>If no radio button is checked then <b>nothing</b> will be sent to the server.
You need to check for this on the server-side, don't assume that an item
with the name "payment" has been posted.</p>
</fieldset>
<fieldset>
<legend>Favourites (checkboxes):</legend>
<p>You can choose more than one media-like(s):</p>
<label>Cinema: <input type="checkbox" name="entertain[]" value="cinema"></label>
<label>Theatre: <input type="checkbox" name="entertain[]" value="theatre"></label>
<label>Television: <input type="checkbox" name="entertain[]" value="tv"></label>
<label>Games: <input type="checkbox" name="entertain[]" value="games" checked>
(checked by default)</label>
<p>The checkbox names end with [] so that they are submitted to the server-side
as an array of values. This means that they can be treated collectively
(as a group) on the server-side.</p>
<p>Either give the checkboxes different names, or use the same name but with
square brackets at the end. Just giving them the same name (without square
brackets) won't make them <i>mutually exclusive</i>. The user will still be
able to select more than one checkbox but (typically) only the last
checked item will be posted. You don't want this behaviour.</p>
<p>If you want the user to be able to only select one checkbox then use radio
buttons. Making checkboxes mutually exclusive requires Javascript and can
therefore be interfered with.</p>
</fieldset>
<fieldset>
<legend>Select and Datalist:</legend>
<label for="selectValue"><b>select</b> - second item is selected by default:</label>
<select id="selectValue" name="selectValue">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
<option value="value4">Value 4</option>
</select>
<p>If you add the attribute <b>size="5"</b> then the select become a listbox. The
<b>multiple</b> attribute also achieves this because a simple select (drop-down)
isn't capable of allowing multiple items to be selected (using the Shift and
Ctrl keys).
</p>
<label for="selGroup">This demonstrates <b>optgroup</b> to group items in the select:</label>
<select id="selGroup" name="selGroup">
<optgroup label="Group 1">
<option>Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
<option>Option 2.1</option>
<option>Option 2.2</option>
</optgroup>
<optgroup label="Group 3" disabled>
<option>Option 3.1</option>
<option>Option 3.2</option>
<option>Option 3.3</option>
</optgroup>
</select>
<p>(This was copied from MDN and the options are missing their <i>values</i>.)</p>
<label for="browserList">Choose a browser from this <b>datalist</b>:</label>
<input list="browsers" id="browserList" name="browserList">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
<p>The main difference with a datalist is that it submits the selected text,
whereas a select can submit an alternative, coded, value.</p>
</fieldset>
<fieldset>
<legend>TextArea:</legend>
<textarea id="comments" name="comments" rows="8" cols="40" maxlength="200"
wrap="hard" placeholder="Enter up-to 200 characters in this textarea"></textarea>
</fieldset>
<fieldset>
<legend>Dates and Times:</legend>
<p>These date and time inputs can be given <b>min</b>, <b>max</b> and <b>value</b>
attributes, demonstrated with the first one.</p>
<label>Date: <input type="date" name="aDate" min="2014-03-31" value="2014-10-31"></label>
<label>Date and Time: <input type="datetime" name="aDateTime"></label>
<label>Date and Time (local): <input type="datetime-local" name="aDateTimeLocal"></label><br>
<label>Time: <input type="time" name="aTime"></label>
<label>Month (and year): <input type="month" name="aMonthYear"></label>
<label>Week: <input type="week" name="aWeek"></label>
</fieldset>
<fieldset>
<legend>Numbers (number/range):</legend>
<label>Number: <input type="number" name="aNumber" min="0" max="10" step="1" value="7"></label>
<label>Range: <input type="range" name="aRange" min="0" max="50" step="5" value="10"></label>
</fieldset>
<fieldset>
<legend>Miscellaneous (color/file/meter/progress/output):</legend>
<label>Color: <input type="color" name="aColor"></label>
<label>File: <input type="file" name="aFile" accept="image/*"></label>
<p>Posting a file requires that the form use the attribute <b>enctype="multipart/form-data"</b>.</p>
<p>A file-input also uses the <b>multiple</b> attribute to submit several files at once.
In which case name the element using square brackets "files[]" so that they will
be received in an array on the server-side.</p>
<p>The <b>accept</b> attribute is useful as a <i>suggestion</i> to the browser, but the
submitted file(s) must be rigorously checked and validated on the server-side.</p>
<p>There is more to uploading files than is mentioned here, look through the <b>Tutorials</b>
here @DIC.</p>
<p>The following <b>meter</b> and <b>progress</b> elements are listed by MDN alongside the other
form elements. I haven't investigated them. They can be manipulated with Javascript, which
could be interesting, but I'm not sure that they will often be used for submitting values
with a form. The meter element isn't supported by Internet Explorer anyway.</p>
<p><b>meter</b> He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p>
<progress value="70" max="100">70 % <b>progress</b></progress>
<p>There is also an <b>output</b> element for displaying the result of a calcuation. It also
isn't supported by Internet Explorer. Refer to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output">MDN</a>. (Seems pretty pointless. Use Javascript.)</p>
</fieldset>
<fieldset>
<legend>Buttons:</legend>
<label><input type="button" value="Does Nothing" disabled>(disabled)</label>
<input type="hidden" value="stillSubmitted" name="hideIt">
<input type="submit" name="btnSubmit" value="Submit">
<input type="reset" value="Reset">
<p>The <b>reset</b> button is discouraged as its behaviour cannot be controlled. Using Javascript
is preferred or, if acceptable, omit this option entirely.<br>
("reset" resets controls to their <i>default</i> values, it doesn't <i>clear</i> them.)</p>
<label><input type="image" src="images/someimg.gif" width="100" height="50"
alt="alternative text" value="imgSubmit"> ("image" as submit button)</label>
</fieldset>
</form>
</body>
</html>
If you think I've missed something then let me know and I might edit the page.
Categories: Uncategorized
Share This Entry:
0 Comments On This Entry
Trackbacks for this entry [ Trackback URL ]
Tags
My Blog Links
Recent Entries
Recent Comments
Search My Blog
3 user(s) viewing
3 Guests
0 member(s)
0 anonymous member(s)
0 member(s)
0 anonymous member(s)
| 