Saturday, January 26, 2013

HTML 5 FORM ELEMENTS


Label & Text Elements


These elements are common elements for any web page. Label is used to title the text field and Text element provides input area to user.

Example:
<label for="textinput">Normal input box :</label><input required id="textinput" type="text" value="a 'normal' input box" />

Attributes:
Required: used to popup message when user clicks on submit button without entering text inside the text field.
Value: sets/returns value of text field.


Checkbox Element


While feature is having more than one value in that case, checkbox element is used on the web page.

<fieldset>
<legend>Interest</legend>
<ul>
<li>
<input id="chksports" type="checkbox" checked/><label for="chksports">Sports</label>
</li>
<li>
<input id="chkentertainment" type="checkbox"/><label for="chkentertainment">Entertainment</label>
</li>
<li>
<input id="chkpolitics" type="checkbox"/><label for="chkpolitics">Politics</label>
</li>
</ul>
</fieldset>

Attributes:
While using checkbox, it will be in unchecked mode but if user want to mark checked then there are attributes as checked / unchecked. In above example, we can see the sports checkbox is marked as checked.

Radio Element


Radio element allows user to select one of the options from option list. E.g. sex.

<fieldset>
<legend>Sex</legend>
<ul>
<li>
<input name="sex" id="radiomale" type="radio" /><label for="radio">Male</label>
</li>
<li>
<input name="sex" id="radiofemale" type="radio"/><label for="radio">Female</label>
</li>
</ul>
</fieldset>

While executing above code, user can select either male or female from the available options. No element will be selected first time, but if user wants to keep Male option selected then        user can apply checked attribute. There is checked /unchecked attribute. By default, it is unchecked.

File Upload element


It is used while uploading file from client machine to server.

<fieldset>
<legend>Upload</legend>
<ul>
<li>
<label for="file">Upload</label><input type="file" id="file" />
</li>
</ul>
</fieldset>

Using above code, user will be able to select a file from local machine to upload. By default, user is allowed to upload single file. If user wants to upload more than one files then user needs to use “multiple” attribute in input tag. It will automatically change the caption of button from “Choose file” to “Choose files” and then user can select more than one file by using control or shift keys from keyboard.


Password Element


It is used when user wants to enter password. It replaces each character in black dot. Even user can not copy the content of this element.

<fieldset>
<legend>Password</legend>
<ul>
<li><label for="password">Password</label> <input id="password"
type="password" value="mypassword" /></li>
</ul>
</fieldset>


TextArea Element


Text element is only used to enter single line text but if user wants to enter multiple lines then you can use TextArea element.

<fieldset>
<legend>TextArea</legend>
<ul>
<li><label for="address">Address</label><textarea id="textarea" rows="4" cols="40">This is a textarea</textarea></li>
</ul>
</fieldset>

Attributes:
Rows” attribute used for textarea would be displayed in how many rows and “Cols” attribute used for characters in single row.

 Select Element (Dropdownlist)


Select element is used to select one item from the list.

<fieldset>
<legend>TextArea</legend>
<ul>
<li><label for="select">Select</label>
<select id="select" >
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select></li>
</ul>
</fieldset>

Select Element (ListBox)


If user wants to display values in list format then the same select element is used with “Multiple” attribute.

<fieldset>
<legend>ListBox</legend>
<ul>
<li><label for="select">Select</label>
<select id="select" multiple >
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select></li>
</ul>
</fieldset>

From above list, user can select multiple values from the list by using shift key or control key. Shift key is used to select range and control key is used to select random values from the list.

Button Element


There are three types of button, (1) normal button (2) submit button while clicking on this button entered data will be posted and (3) reset button, to clear the values of entered elements.

<fieldset>
<legend>Button</legend>
<ul>
<li><input type="submit" value="Submit" /></li>
<li><input type="reset" value="Reset" /></li>
<li><input type="button" value="Ok" /></li>
</ul>
</fieldset>


Email Element


HTML5 introduces new element for email address. Browser itself validates value of element. In old days, we need to write script to mark element mandatory but HTML5 provides us “Required” attribute, it will check the value of element when user submits data and provide appropriate message (refer below image).

<fieldset>
<legend>Email</legend>
<ul>
<li>
<label for="email">Email</label>
<input required type="email" id="email" name="email" />
</li>
<li><input type="submit" value="Submit" /></li>
</ul>
</fieldset>



Tel Element


To enter telephone number, there is element called “tel”. It is actually a free text field like text element. It allows entering sign, number and character in text field.

<fieldset>
<legend>Telephone number</legend>
<ul>
<li>
<label for="tel">Telephone number</label>
<input required type="tel" id="tel" name="tel" />
</li>
<li><input type="submit" value="Submit" /></li>
</ul>
</fieldset>

 

URL element


It allows user to enter only URL of web site in the text field. “Required” attribute will validate entered values against the pattern of URL as well.

<fieldset>
<legend>Website</legend>
<ul>
<li>
<label for="url">Website</label>
<input required type="url" id="url" name="url" />
</li>
<li><input type="submit" value="Submit" /></li>
</ul>
</fieldset>


Search Element


It allow to user to provide search interface.  “Results” attribute will assist user to select items from the number which was mentioned for results attribute.

<fieldset>
<legend>Search</legend>
<ul>
<label for="search">Search term</label>
<input required type="search" results="4" id="search" name="search" />
<li><input type="submit" value="Submit" /></li>
</ul>
</fieldset>


DateTime Element


Chrome version 24.xx.xxx does not support this element. You can verify the functionality of it by using latest version of Opera.

It will provide the readymade calendar control and also request time in UTC format. Time format will in 24 hours.

<fieldset>
<legend>DateTime</legend>
<ul>
<li>
<label for="datetime">Select Date Time: </label><input type="datetime" id="datetime" min=
"2013-01-01" max="2014-01-01"/>
</li>
<li><input type="submit" value="Submit" /></li>
</ul>
</fieldset>


Datetime-local Element


It you want date & time in local format then you can use datetime-local element of HTML5.
In which UTC will not be appear on right side of element.

<fieldset>
<legend>DateTime</legend>
<ul>
<li>
<label for="datetime">Select Date Time: </label><input type="datetime" id="datetime"
/>
</li>
<li><input type="submit" value="Submit" /></li>
</ul>
</fieldset>
<fieldset>
<legend>DateTime-local</legend>
<ul>
<li>
<label for="datetime">Select Date Time: </label><input type="datetime-local" id="datetime"
/>
</li>
<li><input type="submit" value="Submit" /></li>
</ul>
</fieldset>


Date Element


It provides only date. This will work on latest version of chrome and Opera. User can set min and max date range as well.

<fieldset>
<legend>Date</legend>
<ul>
<li>
<label for="date">Select Date : </label><input type="date" id="date" min=
"2013-01-01" max="2014-01-01"/>
</li>
<li><input type="submit" value="Submit" /></li>
</ul>
</fieldset>

Time Element


It provides only time. This will work on latest version of chrome and Opera.
<fieldset>
<legend>Time</legend>
<ul>
<li>
<label for="time">Select Time : </label><input type="time" id="time"
/>
</li>
<li><input type="submit" value="Submit" /></li>
</ul>
</fieldset>

Month Element


To select particular week of year, HTML5 provides week element. This will not work on chrome 24.x.xxx version. Please try below code with latest version of Opera. Value will be in YYYY-MM format.

<fieldset>
<legend>Month</legend>
<ul>
<li>
<label for="month">Select Month : </label><input type="month" id="month"
/>
</li>
<li><input type="submit" value="Submit" /></li>
</ul>
</fieldset>


Week Element


To select particular week of year, HTML5 provides week element. This will not work on chrome 24.x.xxx version. Please try below code with latest version of Opera. Value will be in YYYY-W00 format.

<fieldset>
<legend>Week</legend>
<ul>
<li>
<label for="week">Select Week : </label><input type="week" id="week"
/>
</li>
<li><input type="submit" value="Submit" /></li>
</ul>
</fieldset>

Number Element


The number input type is used to enter a number. It accepts only numbers otherwise returns validation error. It is having attribute of min, max and step. Step allows you to specify the increment value. Chrome allows decimal incremental value in step whereas Opera does not.

<fieldset>
<legend>Number Picker</legend>
<ul>
<li>
<label for="Number">Select Number : </label><input required type="number" id="number" min="1" max="10" step=".1"/>
</li>
<li><input type="submit" value="Submit" /></li>
</ul>
</fieldset>


Range & Output Element


The range input type generates slider control which can be used for volume control, it is having min, max and step attributes. Output element will display the current value of slider.

<fieldset>
<legend>Slider</legend>
<ul>
<li>
<label for="slider">Select value : </label><input required type="range" id="range" min="1" max="10" step=".5"/> <output onforminput="value=range.value"/>
</li>
<li><input type="submit" value="Submit" /></li>
</ul>
</fieldset>



Color Element


Excellent element provided by HTML 5 is color. User does not need to write code for this, just user needs to use color element in input tag. You can run below code in latest version of chrome and opera. Both will display color picker differently.

<fieldset>
<legend>Color</legend>
<ul>
<li>
<label for="color">Select color : </label><input required type="color" id="color"  />
</li>
<li><input type="submit" value="Submit" /></li>
</ul>
</fieldset>






3 comments:

  1. Hello Ashish
    Thanks for your post.
    Will you please help in designing layout ( some advanced) using HTML5 & CSS3 ??

    ReplyDelete
    Replies
    1. http://www.adobe.com/devnet/html5/articles/css3-regions.html will help you to explore advanced layout using HTML5 and CSS3.

      regards
      Ashish

      Delete
  2. Hi,

    I want to know how to reduce space between two section in html5.

    Regards,
    M. Zeeshan Ayyaz

    ReplyDelete