Scribd
Upload
4 views

HTML Forms (1)

The document provides an overview of HTML forms, detailing their purpose in collecting user information and the various input types available, such as text fields, checkboxes, and buttons. It outlines the syntax and examples for different form elements, including email, date, and range inputs. Additionally, it discusses HTML layout and responsive design principles for creating visually appealing and adaptable web pages.

Uploaded by

ELAKKIYA S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

HTML Forms (1)

The document provides an overview of HTML forms, detailing their purpose in collecting user information and the various input types available, such as text fields, checkboxes, and buttons. It outlines the syntax and examples for different form elements, including email, date, and range inputs. Additionally, it discusses HTML layout and responsive design principles for creating visually appealing and adaptable web pages.

Uploaded by

ELAKKIYA S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 53

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)”

You might also like