HTML FORMS
HTML FORMS
Used to collect the user information
There are different types to use the input field
Maximum , the forms are used to register and receiving the
details
Collect the information such as name, password,
email address, number etc
There are various form elements like textarea fields, text fields,
drop-down menus, Radio button , checkbox etc.
FORM ELEMENTS
<label> : label for the input field
<input> : it is used to get data from the user
<button> : it is a clickable button to control
<select> : create a drop-down list
<textarea> : long text in the single input field
<fieldset> : to draw a box around the form element
<legend> : caption of the feildset elements
<datalist> : defined the list option
<output> : displays the output of performed calculations
<option> : the options should be selected
<optgroup> : group related option in the list.
Different types of input fields :
• Button • range
• Checkbox • reset
• search • submit
• Date • tel
• Datetime-local • text
• Email • time
• Image • url
• Month • week
• Number
• Password
• radio
Button
• The input field that act as like the button format
• The different types of button perform the different types of
task
1. Button
2. Submit
3. Reset
Syntax :
<element type=“button” >click me</element>
Example:
<body>
<h2>Submit Button</h2>
<form>
<label>Username: <input type="text" /></label>
<label>Password: <input type="password" /></label>
<button type="submit“ >submit</button>
</form>
</body>
Checkbox
• The square box tick to activate option
• It select multiple option also
Syntax :
<input type=“checkbox” />
Example:
<body>
<h2>Checkbox field</h2>
<form>
<input type="checkbox" />
data1 checkbox <br>
<input type="checkbox"/>
data2 checkbox <br>
<input type="checkbox"/>
data3 checkbox
</form>
</body>
search
• Text field for search the string
Syntax:
<input type=“search” >
Example:
<body>
<h2>Search field</h2>
<form>
<label for=“gsearch”>Search : </label>
<input type=“search” id=“gsearch” name=“search”>
<input type=“submit”>
</form>
</body>
Date
• It includes the datepicker
• It specify the date, month and year
Syntax:
<input type=“date” />
Example:
<body>
<h2> date field</h2>
<p>it is used to date picker to the element</p>
<form action="/action_page.php">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit">
</form>
<body>
Datetime- local
• It defined as the date picker
• It includes day, month, year and time
Syntax:
<input type=“datetime-local” />
Example:
<body>
<h2> datetime-local field</h2>
<p>it is used to date picker to the element</p>
<form action="/action_page.php">
<label for="birthdaytime">Birthday:</label>
<input type="datetime-local" id="birthdaytime"
name="birthdaytime">
<input type="submit">
</form>
<body>
Email field
• It specify the email address
• It automatically validate in the email format
• We can add multiple email address, add the ‘multiple’
attribute in the element
Syntax:
<input type=“email” />
Example:
<body>
<h2> datetime-local field</h2>
<h3>Show an email field </h3>
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit">
</form>
<h3>multiple email</h3>
<form action="/action_page.php">
<label for="emails">Enter email addresses:</label>
<input type="email" id="emails" name="emails" multiple>
<input type="submit">
</form>
</body>
Image field
• Submit button is act as a image
• The path is specified in the ‘src’ attribute
Syntax:
<input type=“image” />
Example:
<body>
<h2> image field</h2>
<form action="/action_page.php">
First name:
<input type="text" id="fname" name="fname">
<br><br>
<input type="image" src="submit.png" alt="Submit" width="100" height="50">
</form>
</body>
Month field
• It is used to specify the month and year
• The format is ‘YYYY-MM”
Syntax:
<input type=“month” />
Example:
<body>
<h2> month field</h2>
<form action="/action_page.php">
<label for="month">Month :</label>
<input type="month" id="month" name="month">
<input type="submit">
</form>
</body>
Number
• A field for entering the number
• It restrictions to allow the alphabet
Syntax:
<input type=“number” />
Example:
<body>
<h2> Number field</h2>
<form action="/action_page.php">
<label >number :</label>
<input type="number" name="quantity" min="1" max="5">
<input type="submit">
</form>
</body>
Radio
• It defines a radio button
• It select the any one of the options
• It specify the unique attribute for the each radio button
Syntax:
<input type=“radio” />
Example:
<body>
<h2> Radio field</h2>
<form action="/action_page.php">
<p>Select option:</p>
<input type="radio" >
<label >Tamil</label><br>
<input type="radio" >
<label >English</label><br>
<input type="radio" >
<label >Hindi</label>
</form>
</body>
Range
• It is like a slider control
• It defines the range of the maximum target
• Used to specify the length in the slider control
Syntax:
<input type=“range” />
Example:
<body>
<h2> Range field</h2>
<form action="/action_page.php">
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" min="0" max="50"><br> <br>
<input type="submit">
</form>
</body>
Reset
• Reset button, resets all the form values that already filled
Syntax :
<input type=“reset” />
Example:
<body>
<h2> Reset field</h2>
<form action="/action_page.php">
Name:
<input type="text" ><br><br>
Age
<input type="number"><br><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</body>
Submit
• It submitting the form data to server
Syntax:
<input type=“submit” />
Example:
<body>
<h2> Reset field</h2>
<form action="/action_page.php">
Name:
<input type="text" ><br><br>
Age
<input type="number"><br><br>
<input type="submit" value="Submit">
</form>
</body>
tel
• It is a field for entering a telephone number
• Telephone number are not automatically validated
Syntax:
<input type=“tel” />
Example:
<body>
<h2> tell field</h2>
<form action="/action_page.php">
<label for="phone">Enter a phone number:</label>
<br><br>
<input type="tel" id="phone" name="phone“
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
<br><br>
<input type="submit">
</form>
</body>
Text
• It is used to collect the user information in the text way format
• It is a default type of input element
Syntax:
<input type=“text” />
Example:
<body>
<h2> Text field</h2>
<form action="/action_page.php">
Name:
<input type="text" >
<input type="submit" value="Submit">
</form>
</body>
Time
• It is used to control for entering the time
• Type of elements that can be used to enter the time by user
• The default value of 60 minutes and 60 seconds for 1 minute
Syntax:
<input type=“time” />
Example:
<body>
<h2> Text field</h2>
<form action="/action_page.php">
Name:
<input type="time" ><br><br>
<input type="submit" value="Submit“>
</form>
</body>
url
• Defines the fields for entering the url
• The values is automatically validated before the for is submitted
• It creates the field that accepts the url
Syntax:
<input type=“url” />
Example:
<body>
<h2> URL field</h2>
<form action="/action_page.php">
My URL:
<input type="url" ><br><br>
<input type="submit" value="Submit">
</form>
</body>
Week
• Defines the weeks and year control
• It is used like the datepicker to select the
week and year
• Click the calender icon inside the field to select
the week/ year picker
Syntax :
<input type=“week” />
Example:
<body>
<h2> Week field</h2>
<form action="/action_page.php">
Task week:
<input type="week" ><br><br>
<input type="submit" value="Submit">
</form>
</body>
HTML LAYOUT
AND RESPONSIVE
HTML LAYOUT
Used to make the webpage look better
Provide a way to arrange the web-page in structured,
manner and responsive
The set of rules to establish webpage
The layout is like a table format
It is same as the magazine and the newspaper layout
HTML RESPONSIVE
Create the web page for all devices
The responsive design automatically adjust for the
different screens
In inline media :
media=“(max-width:__px)”
In external media:
@media screen and (min-width : __px)”
