Subscribe to andrewsw's Blog        RSS Feed
-----

HTML5 Form Elements and Attributes

16 November 2014
Icon Leave Comment
Posted by andrewsw 
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 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

Back to andrewsw's Blog →

0 Comments On This Entry

 

Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

← October 2020 →

S M T W T F S
    123
45678910
11121314151617
18192021222324
2526 27 28293031

Tags

    Recent Entries

    Recent Comments

    Search My Blog

    1 user(s) viewing

    1 Guests
    0 member(s)
    0 anonymous member(s)

    Categories