COMPUTER ENGINEERING DEPARTMENT
WEB TECHNOLOGIES
(RC 2019 – 2020)
TE-COMP SEM - V
Introduction to Form and HTML Controls
HTML is also designed to create forms that are the primary elements of
a Web page and gather information from the user.
The basic purpose of an HTML form is to allow the user to enter data on
one end and then send the data on the other end trough the Web
server.
The controls are the basic parts of an HTML form.
The user fills forms by entering data in the text boxes, clicking the radio
button, and clearing the check boxes.
Each form can also have a submit button that helps to send data
through the server to the action URL.
Creating an HTML Form
An HTML form is a Web page that contains form elements.
A basic form has three important parts: the <form> tag, which includes
the URL of the script needed to process the form; the form elements,
which are similar to the text fields; and the submit button, which sends
the data on the server.
All the input elements should be enclosed within the opening < form>
and closing </form> tags.
Creating an HTML Form
<html>
<body>
<form>
First Name :
<input type = "text" name = "First name">
<br>
Last Name:
<input type="text" name = "Last name">
<br>
<input type = "submit" value = "SUBMIT">
</form>
</body>
</html>
Specifying the Action URL and Method to Send the Form
In HTML, you can direct the data that the user enters in the form to the
server.
You can do this by specifying the action URL and the method in your
HTML code.
Specified inside the <form> tag, action URL is the physical address of the
server to which you want the user data to be redirected at the click of
the submit button.
You can specify two different submission methods for a form.
The method is specified inside the < form> tag using the method
attribute.
Specifying the Action URL and Method to Send the Form
GET:
[Link]
Specifying the Action URL and Method to Send the Form
<html>
<body>
<form action="[Link]" method="post">
First Name:
<input type="text" name="firstname">
<br>
Last Name:
<input type="text" name="lastname">
<br>
<input type="submit" value="SUBMIT">
</form>
<p> If you click the <b><u>"SUBMIT"</u></b> button you will be redirected to the <b><u>
[Link] </u></b> page.
</p>
</body>
</html>
Using the HTML Controls
A user interacts with forms through controls that are the basic element
of a Web page form.
The HTML controls help to make a Web page user friendly.
A user can enter data in the Web page form with the help of the HTML
controls.
The controls that provide input to the form are created using the
<input> tag and a different value for the type attribute.
The primary tag used in HTML to add controls is the <input> tag that
defines the start of an input field where the user can enter data.
Using the HTML Controls
Using the HTML Controls
Using the HTML Controls
<html>
<body>
<form action="[Link]" method="post">
First Name:
<input type="text" name="firstname" size = "50">
<br>
Last Name:
<input type="text" name="lastname" size = "30">
<br>
</form>
</body>
</html>
Adding a Button
A button is a type attribute value of the <input> tag that is used to
create a button on the HTML form.
To add a button on your Web page, add the <input type-"button"> tag in
your HTML code.
<html>
<head>
<body> <form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
Adding a Check Box
A check box is a small box with a check mark in it and a user can either select or clear it
by a click.
To add a check box to your Web page, add the < input type = "checkbox"> tag to your
HTML code.
<html>
<body> <form action="">
<b>I love reading:</b>
<input type = "checkbox" name = "hobby" value="books" >
</br>
<b>I love playing:</b>
<input type="checkbox" name = "hobby" value="play" checked>
</br>
<b>I love driving:</b>
<input type="checkbox" name="hobby" value="drive">
</form>
</body>
Adding a Radio Button
<html>
<body> <form action="">
YES
<input type = "radio" name = "poll" value="yes" >
</br>
NO
<input type="radio" name = "poll" value="no" >
</br>
MAYBE
<input type="radio" name = "poll" value=“maybe" >
</br>
</form>
</body>
</html>
The difference between a checkbox and a radio button is that radio buttons work in
Adding a Submit Button
A submit button is the most important control in a form because when
you click this button, all the data in the form is sent to the Web server.
When the user clicks the submit button, the data in the form is
transferred to the URL specified in the <form action> tag.
Adding a Submit Button
<html>
<body>
<form action="[Link]" method = "post">
Name
<input type = "text" name = "enter your name" >
<br>
Password:
<input type="password" name = "password" >
<br>
<input type="submit" value = "SUBMIT" >
</form>
</body>
</html>
Adding a Reset Button
Used to clear all data. All the controls in the form are returned to their original state and
the values in the form fields are cleared.
<html>
<body>
<form action="[Link]" method = "get">
Name
<input type = "text" >
<br>
Password:
<input type="password" >
<br>
<input type="submit" value = "SUBMIT" >
<input type="reset" >
</form>
</body>
Adding a Text Area
A text area is a multi-line text input control and displays text entered in it.
A user can write unlimited number of characters in the text area.
You must set the numbers of rows and columns you want in the text area
using the rows and cols attributes.
<html>
<body>
<form>
<textarea rows = "10" cols = "30">
This is an example of text area on the web page. A user can input text in
this area.
</textarea>
</form>
</body>
Adding a Selection Control
In HTML, you can add selection controls to your Web page.
The selection control includes the <select>, <option>, and <optgroup> tags.
The <select> tag defines the control for the selection of options and creates a
drop-down list.
You can use this tag in a form to accept a user input from a list of items.
The <option> tag defines an option in a drop-down list.
Its most important attribute is the <value> attribute that determines the value
being sent to the server.
The <optgroup> tag allows you to group your choices in the form.
This tag helps you to group related choices, when you have a long list of options
to select from in the drop-down list created by using the <select> tag.
Adding a Selection Control
<html>
<body>
<form>
<select>
<optgroup label="General hobby">
<option value ="playing">Playing</option>
<option value = "Music"> Music</option>
</optgroup>
<optgroup label = "Educational Hobby">
<option value ="stamp collection">stamp collection</option>
<option value = "reading"> Reading</option>
</optgroup>
</select>
</form>
</body>
Adding a Multiple Selection Control
The selection control allows you to select only a single option from the
list.
You can also select multiple options from the list at a time by using the
same <select> tag.
The <select> tag includes the muItiple attribute to specify that multiple
options can be selected at a time.
To select multiple options from the list, you ere required to hold down
the CTRL key or the SHIFT key.
Adding a Multiple Selection Control
<html>
<body>
<form>
<select MULTIPLE>
<optgroup label="General hobby">
<option value ="playing">Playing</option>
<option value = "Music"> Music</option>
</optgroup>
<optgroup label = "Educational Hobby">
<option value ="stamp collection">stamp collection</option>
<option value = "reading"> Reading</option>
</optgroup>
</select>
</form>
</body>
</html>
When you hold down the CTRL key and click the options In the list, the clicked options get