HTML Forms
HTML Forms
• HTML Forms are required when you want to
collect some data from the site visitor.
• For example during user registration you would
like to collect information such as name, email
address, credit card, etc.
• A form will take input from the site visitor and
then will post it to a back-end application such as
CGI, ASP Script or PHP script etc.
• The back-end application will perform required
processing on the passed data based on defined
business logic inside the application.
Elements in forms
• There are various form elements available like:
• Text fields
• Textarea fields
• Drop-down menus
• Radio buttons
• Checkboxes
• etc.
Syntax
• The HTML <form> tag is used to create an
HTML form and it has following syntax:
<form action="Script URL“
method="GET|POST">
form elements like input, textarea etc.
</form>
Form Attributes
HTML Form Controls
• There are different types of form controls that
you can use to collect data using HTML form:
– Text Input Controls
– Checkboxes Controls
– Radio Box Controls
– Select Box Controls
– File Select boxes
– Hidden ControlsClickable Buttons
– Submit and Reset Button
Text Input Controls
• There are three types of text input used on forms:
– Single-line text input controls - This control is used for
items that require only one line of user input, such as
search boxes or names. They are created using HTML
<input> tag.
– Password input controls - This is also a single-line text
input but it masks the character as soon as a user enters it.
They are also created using HTMl <input> tag.
– Multi-line text input controls - This is used when the user
is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML
<textarea> tag.
Single-line text input controls
• This control is used for items that require only one line of user input, such
as search boxes or names. They are created using HTML <input> tag.
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>
</body>
</html>
Attributes for text
Password input controls
• This is also a single-line text input but it masks the character as
soon as a user enters it.
• They are also created using HTML <input> tag but type
attribute is set to password.
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type="text" name="user_id" />
<br>
Password: <input type="password" name="passwor d" />
</form>
</body>
</html>
Multiple-Line Text Input Controls
• This is used when the user is required to give
details that may be longer than a single
sentence.
• Multi-line input controls are created using
HTML <textarea> tag.
Example
<html>
<head>
<title>Multiple-Line Input Control</title>
</head><body>
<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
</form>
</body>
</html>
Attributes of textarea
• Following is the list of attributes for
<textarea> tag.
Checkbox Control
• Checkboxes are used when more than one
option is required to be selected.
• They are also created using HTML <input> tag
but type attribute is set to checkbox.
• Attributes of <checkbox> tag:
Example
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
</body>
</html>
Radio Button Control
• Radio buttons are used when out of many
options, just one option is required to be
selected.
• They are also created using HTML <input> tag
but type attribute is set to radio.
Example
• <html>
• <head>
• <title>Radio Box Control</title>
• </head>
• <body>
• <form>
• <input type="radio" name="subject" value="maths"> Maths
• <input type="radio" name="subject" value="physics"> Physics
• </form>
• </body>
• </html>
Attributes
• Following is the list of attributes for radio
button:
Select Box Control
• A select box, also called drop down box which provides option to
list down various options in the form of drop down list, from
where a user can select one or more options.
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
</body>
</html>
Attributes of select
File Upload Box
• If you want to allow a user to upload a file to
your web site, you will need to use a file
upload box, also known as a file select box.
• This is also created using the <input> element
but type attribute is set to file.
Example
<html>
<head>
<title>File Upload Box</title>
</head>
<body><form>
Select file:
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>
Attributes of file upload
Button Controls
• There are various ways in HTML to create
clickable buttons.
• You can also create a clickable button using
<input> tag by setting its type attribute to
button.
• The type attribute can take the following
• values:
Values
Example
<html>
<head>
<title>Buttons</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="images/logo.jpg" />
</form>
</body>
</html>
Hidden Form Controls
• Hidden form controls are used to hide data
inside the page which later on can be pushed
to the server.
• This control hides inside the code and does
not appear on the actual page.
Example
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
</body>
</html>
