The Form
Html5's new form elements go a long way in helping create a mistake free form. Not all functions of each element work in all browsers (March 2012) but if the new input element is not read by a particular browser then the user gets the old input box and will still be able to fill out the information correctly.
Validate - required
The form will now validate without any additional scripting you just need to add "required" to any of the form's user elements.Form Tag
<form></form>All the form elements including the submit button are placed within the opening and closing form tags.
Submission Methods
There are two different submission methods for a form "POST" and "GET".Post: You would normally use for a form when collecting information from a user.
Get: You would normally use when data is returned as in a search.
Connect to
Server Side ScriptAlthough we are going to connect to a php script you do not have to know php in order to write the script.
action= the file name of the server side script, in this case address.php.
<form method="post" action="address.php">
Input elements and submit button
</form>
Fieldset
<fieldset></fieldset>Is used to separate different sections of the form. A border is placed around a group of elements (see below).
Labels
<label></label>A label is used for the title of each element of the form
<form>
<fieldset>
<label>Email</label>
<input type="email" >
</fieldset>
</form>
Texarea
<textarea></textarea>a multi-line text input area
Select Menu/List
<select><option>ROSES</option>
<option>DAISIES</option>
<option>PRIMROSES</option>
</select>
Input
<input>
There is not a closing tag for the input element.
Type indicates the purpose of the input element and in turn requires the user to enter the correct information. For example if the type is email <input type="email"> then the user will be required to enter an email address in order to submit the form
<input type=text>
<input type="datetime"> NEW
<input type="datetime-local"> NEW
<input type="date"> NEW
<input type="month"> NEW
<input type="time"> NEW
<input type="week"> NEW
<input type="number"> NEW
<input type="range"> NEW
<input type="email"> NEW
<input type="url"> NEW
<input type="search"> NEW
<input type="tel"> NEW
<input type="color"> NEW
<input type="password">
<input type="checkbox">
The check box is used if you want the user to check more than one item from a group of items. If you want the user to only check one item then you should use the Radio Button
<input type= "radio">
Inorder for the user to check only one radio button all buttons must have the same name.
<input type="submit or reset">
The value determines the text on the button
<input type="submit" value="submit">
<input type="reset" value="reset">
File upload control,
<input type="file">
<input type="image">
Hidden Input Control
Cannot be seen or used by the user<input type="hidden>
Other Attributes
autocomplete NEW
autocomplete ="on" or "off"
value is stored so that the form can be prefilled later
autofocus NEW
the element is focused as soon as the document is loaded
dirname NEW
Enables submission of a value for the directionality of the element, and gives the name of the field that contains that value.
disabled
elements represent a disabled control
formaction
used with type="submit" and type="image", specifies the URL of the file that will process the input control when the form is submitted
formnovalidate NEW
The input item does not have to validate when the form is submitted
formtarget
formtarget="_blank" etc indicates where to display the response that is received after submitting the form. New window etc.
list NEW
list =id reference, The value of the id attribute on the datalist with which to associate the element
min and max
min and max=" "
min or max length of the element
multiple
When you have a form that sends a message from your website, the multiple attribute allows the user to select multiply receipients.
name
name="email"
must match server side script and will be listed in email etc.
novalidate NEW
password
input password field
pattern NEW
to check the value of the control represented by its element
placeholder
placeholder=" "
Will be shown in the input box as a hint
specifies that the input item must be filled out inorder to submit the form
step NEW
step=" "
specifies the number of intervals for an input field
target NEW
target="_blank" etc
browsing context
View in Different Browsers
All elements displayed correctly in Chrome (March 2012)An input element with no type attribute specified is equal to an input element with its type attribute set to "text". The type for each of the input items below are also shown in the title of each item
Depending upon the browser the input elements are displayed differently. For example in some browsers color will allow the user to select from a color swatch in others the user is required to enter the name or hex number for the color.