4.docxform by Anisul Islam

4.
4 HTML Form
HTML <form> Elements:
<form> element is used to create a html form. form help us to collect user data.
<input /> element is the most used form element.
<label> element is used for labelling form elements. It helps the form elements accessible by guiding the screen
reader. <label for="name"> element has for="" attribute which value should be equal to <input id="name"/>
element's id value.
<select> - helps to create dropdown menu.
<option> - helps to create options for dropdown menu.
<textarea> - helps to create multiple lines text input field.
<button> - helps to create button.
<fieldset>
<legend>
<output>
<datalist> & list="" attributes
form attributes:
<form action="/home" method="post" autocomplete="on">-> enable the autocomplete option.
<form action="/home" method="post" autocomplete="on" enctype="text/plain">-> sends data without encoding.

name="" attribute is used to set the name of any element which is essential for getting data in server side especially.
<input /> element types
type="" attribute can change the visualization of <input /> element.
<input type="text"/> creates a single line text input field.
<input type="email"/> creates a single line email input field.
<input type="password"/> creates a single line password input field.
<input type="number"/> creates a single line number input field.
<input type="checkbox"/> creates a checkbox input field.
<input type="radio"/> creates a radio button input field.
<input type="button"/> creates a clikable button.
<input type="submit"/> creates a submit button for form.
<input type="color"/> creates a color picker input field.
<input type="date"/> creates a date picker.
<input type="month"/> creates a month picker.
<input type="time"/> creates a time picker.
<input type="week"/> creates a week picker.
<input type="image"/> creates a image selector.

<input type="file"/> creates a file selector.
<input type="url"/> creates a url selector.
<input type="tel"/> creates a input field for telephone number.
<input type="search"/> is used for searching.
<input type="hidden"/> creates a input field which is not visible to user.
<input type="range" min="" max=""/> creates a range by setting min and max value, default range is 0 to 100.
Input attributes:
value="" attribute is used to set initial value for input field.
readonly attribute is used to set an input field as readonly.
checked attribute is used to set an input field already checked.
disabled attribute is used to make a input field disable.
size="" attribute is used to set the number of characters for an input field.
maxlength="" attribute is used to set the maximum number of characters for an input field.
max="" attribute is used to set the maximum input value for an input field.
min="" attribute is used to set the minimum input value for an input field.
pattern="" attribute is used to set a regular expression for validating an input field.
placeholder="" attribute is used to give a hint to the users.
required attribute specifies that an input element must be filled before submitting the form.
step="" attribute specifies steps for input field.
autofocus attribute makes an input field automatically focus when the page is loaded.
height="" width="" attribute is used to set input elements height and width.
list="id_of_datalist" attribute is used to set input elements height and width.
A form example is given below:
<form action="/" method="post">
<div>
<datalist id="usernames">
<option value="anis"></option>
<option value="linkon"></option>
<option value="ridoy"></option>
</datalist>
<label for="username">Username: </label>
<input
type="text"
id="username"
name="username"
size="30"
autofocus
required
list="usernames"
/>
</div>
<br />
<div>
<label for="password">Password: </label>
<input type="password" id="password" name="password" required />
</div>
<br />
<div>
<label for="email">Email: </label>
<input type="email" id="email" name="email" autocomplete />
</div>
<br />
<div>
<label for="phone">phone: </label>
<input type="tel" id="phone" name="phone" />
</div>
<br />
<div>
<label for="dob">Date of birth: </label>
<input type="date" id="dob" name="dob" />
</div>
<br />
<div>
<label for="month">favourite Month: </label>
<input type="month" id="month" name="month" />
</div>
<br />
<div>
<label for="random">Select a random number from 1 to 5: </label>
<input
type="number"
id="random"
name="random"
min="1"
max="5"
value="3"
/>
</div>
<br />
<div>
<label for="profile">Select your image: </label>
<input type="image" id="profile" name="profile" />
</div>
<br />
<div>
<label for="file">Select a file: </label>
<input type="file" id="file" name="file" />
</div>
<br />
<div>
<label for="color">Select favourite color: </label>
<input type="color" id="color" name="color" />
</div>
<br />
<div>
<label for="website">Paste your website's url: </label>
<input type="url" id="website" name="website" />
</div>

<br />
<div>
<p>Religion:</p>
<div>
<input type="checkbox" id="muslim" checked />
<label for="muslim">muslim</label>
</div>
<div>
<input type="checkbox" id="hindu" />

<label for="hindu">hindu</label>
</div>
<div>
<input type="checkbox" id="other" disabled />
<label for="other">other</label>
</div>
</div>

<br />
<div>
<p>Gender:</p>
<div>
<input type="radio" id="male" name="gender" />
<label for="male">male</label>
</div>
<div>
<input type="radio" id="female" name="gender" />
<label for="female">female</label>
</div>
<div>
<input type="radio" id="other" name="gender" />
<label for="other">other</label>
</div>
</div>

<br />
<div>
<label for="department">Department: </label>
<select name="department" id="department">
<option value="cse">CSE</option>
<option value="eee">EEE</option>
<option value="llb">LLB</option>
</select>
</div>

<br />
<div>
<label for="message">Message: </label> <br />
<textarea name="" id="message" cols="30" rows="10"></textarea>
</div>

<br />
<div>
<button type="submit">Save Data</button>
<button type="reset">Clear</button>
</div>
</form>
output of the above html code table
Chapter 5: HTML5 Sematic Elements
5.1 div - non semantic tag
div can help to divide screen
5.2 Introduction to HTML5
HTML5 developed in 2014
HTML5'S Objectives
adding more semantic tags
more form types
improve accessibility
improved storage facilities
improved graphics & media
remove few things

4.docxform by Anisul Islam

Uploaded by

Copyright:

Available Formats

4.docxform by Anisul Islam

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

4.docxform by Anisul Islam

Uploaded by

Copyright:

Available Formats

4.

HTML <form> Elements:

<input /> element is the most used form element.

<select> - helps to create dropdown menu.

<option> - helps to create options for dropdown menu.

<textarea> - helps to create multiple lines text input field.

<button> - helps to create button.

<datalist> & list="" attributes

<form action="/home" method="post" autocomplete="on">-> enable the autocomplete option.

<form action="/home" method="post" autocomplete="on" enctype="text/plain">-> sends data without encoding.

<input /> element types

type="" attribute can change the visualization of <input /> element.

<input type="text"/> creates a single line text input field.

<input type="email"/> creates a single line email input field.

<input type="password"/> creates a single line password input field.

<input type="number"/> creates a single line number input field.

<input type="checkbox"/> creates a checkbox input field.

<input type="radio"/> creates a radio button input field.

<input type="button"/> creates a clikable button.

<input type="submit"/> creates a submit button for form.

<input type="color"/> creates a color picker input field.

<input type="date"/> creates a date picker.

<input type="month"/> creates a month picker.

<input type="time"/> creates a time picker.

<input type="week"/> creates a week picker.

<input type="image"/> creates a image selector.

<input type="url"/> creates a url selector.

<input type="tel"/> creates a input field for telephone number.

<input type="search"/> is used for searching.

<input type="hidden"/> creates a input field which is not visible to user.

value="" attribute is used to set initial value for input field.

readonly attribute is used to set an input field as readonly.

checked attribute is used to set an input field already checked.

disabled attribute is used to make a input field disable.

step="" attribute specifies steps for input field.

list="id_of_datalist" attribute is used to set input elements height and width.

A form example is given below:

<form action="/" method="post">

<label for="username">Username: </label>

<label for="password">Password: </label>

<input type="password" id="password" name="password" required />

<label for="email">Email: </label>

<input type="email" id="email" name="email" autocomplete />

<label for="phone">phone: </label>

<input type="tel" id="phone" name="phone" />

<label for="dob">Date of birth: </label>

<input type="date" id="dob" name="dob" />

<label for="month">favourite Month: </label>

<input type="month" id="month" name="month" />

<label for="random">Select a random number from 1 to 5: </label>

<label for="profile">Select your image: </label>

<input type="image" id="profile" name="profile" />

<label for="file">Select a file: </label>

<input type="file" id="file" name="file" />

<label for="color">Select favourite color: </label>

<input type="color" id="color" name="color" />

<label for="website">Paste your website's url: </label>

<input type="url" id="website" name="website" />