HTML Forms
PART 1
TOPICS
- Introduction to Forms
- Form Elements
- <input> tag
- Textbox & Password box elements
- Radio button and Check box elements
- Submit and Reset buttons
- Few attributes of <input> tag
Introduction to Forms
Forms are an interactive feature of many websites.
Forms are the primary method for getting data from visitors of the web site.
A form takes the input and sends the data to webserver on clicking submit button.
On the web server backend application scripts will collect the data and store it on the database on the server.
Creating Forms
To create forms in HTML web page
<form> element is used
It is a container tag which will contain all the form elements
Form Elements
<input> element
The <input> element is the most important form element.
Using <input> tag and its type attribute you can create various form elements.
It is an empty tag.
First Name : <input type=“text” name=“fname” size=20>
It defines a single-line text input field.
Password: <input type=“password” name=“pwd” size=16>
The characters in a password field are masked (shown as asterisks or circles).
A radio button is used to select one of many given choices.
Radio buttons are shown in radio groups to show a set of related options, only one of which can be selected.
To create Radio button:
Example -
Gender:
<input type=“radio” name=“gender” value=“male”> Male
<input type=“radio” name=“gender” value=“female”> Female
Checkbox
Checkboxes are used for instances where a user may want to select multiple options
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
To create Checkbox
Example -
<h2>Select your Hobbies: </h2>
<input type=“checkbox” name=“h_read” value=“reading”> Reading
<input type=“checkbox” name=“h_surf” value=“surf”> Surfing
<input type=“checkbox” name=“h_music” value=“music”> Listening to Music
<!doctype html>
<html>
<head>
<title>Form example</title>
</head>
<body bgcolor=“#FFFFCC”>
<h1>Submit your information</h1>
<form>
First Name : <input type=“text” name=“fname”>
<br> <br>
Last Name : <input type=“text” name=“lname”>
<br> <br>
Gender :
<input type=“radio” name=“gender” value=“male”> MALE
<input type=“radio” name=“gender” value=“female”> FEMALE
<br> <br>
Hobbies :
<input type=“checkbox” name=“h_read” value=“reading”> Reading
<input type=“checkbox” name=“h_surf” value=“surf”> Surfing
<input type=“checkbox” name=“h_music” value=“music”> Listening to Music
<br><br>
<input type=“submit” value=“SUBMIT”>
<input type=“reset” value=“RESET”>
</form>
</body>
</html>
Submit Button
The Submit Button allows the user to send the form data to the web server.
The form data is typically handled by a Web Server page with a script for processing input data.
The server page is specified in form's action attribute.
Reset Button
A reset button is used to reset all form values to their default values. (clear the form)
Attributes of <input> tag
Type - Specifies the type <input> element to display
Name - Specifies the name of an <input> element
Size - Specifies the width (in characters) of an input field
Maxlength - Specifies the maximum number of character for an input field
Value - Specifies the default value for an input field
Checked - Specifies that an input field should be pre-selected when the page loads (only for radio buttons and checkbox fields)
Disabled - Specifies that an input field is disabled
Required - Specifies that an input field is required (must be filled out) before submitting the form
Readonly - Specifies that an input field is read only (cannot be changed)
Autofocus - Specifies that an <input> element should automatically get focus when the page loads (boolean attribute)
3.
NOTES FOR READING
PART 2
FOR VIDEO TUTORIAL CLICK HERE
TOPICS
About Action attribute of <form> tag
Few attributes of <input> tag
Creating Drop-down list box
Attributes of <select> tag
<textarea> tag
Attributes of <textarea> tag
Action attribute of <form> tag
The Action attribute is used to specify where the form data is to be sent to the server after submission of the form.
Action=“URL” - It is used to specify the URL of the document where the data to be sent after the submission of the form.
Add the action attribute in <form> tag as per given below:
<form action=“https://exza.in/response.php”>
The response.php web page will collect the form data and display back the contents.
Creating Drop-down list box
<select> tag is used to create drop-down list box consisting of a number of options, which a user can choose.
Each option is defined by an <option> tag.
In previous simple form example no. 1 add a dropdown list for selecting City.
Attributes of <select> tag
name – Defines a name for the drop-down list.
size – Defines the number of visible options in a drop-down list.
multiple – Specifies that multiple options can be selected at once.
selected – It specifies that an option should be pre-selected when the page loads. (for <option> tag)
E.g. <select name=“city” size=3 MULTIPLE>
required – Specifies that the user is required to select a value before submitting the form.
autofocus – Specifies that the drop-down list should automatically get focus when the page.
disabled – Specifies that a drop-down list should be disabled.
E.g. <select name=“city” size=3 MULTIPLE AUTOFOCUS>
Submit Button
The Submit Button allows the user to send the form data to the web server.
The form data is typically handled by a Web Server page with a script for processing input data.
The server page is specified in form's action attribute.
Reset Button
A reset button is used to reset all form values to their default values. (clear the form)
Attributes of <input> tag
Type - Specifies the type <input> element to display
Name - Specifies the name of an <input> element
Size - Specifies the width (in characters) of an input field
Maxlength - Specifies the maximum number of character for an input field
Value - Specifies the default value for an input field
Checked - Specifies that an input field should be pre-selected when the page loads (only for radio buttons and checkbox fields)
Disabled - Specifies that an input field is disabled
Required - Specifies that an input field is required (must be filled out) before submitting the form
Readonly - Specifies that an input field is read only (cannot be changed)
Autofocus - Specifies that an <input> element should automatically get focus when the page loads (boolean attribute)
Placeholder – specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
Title – Provides a tool tip for the input field.
Pattern – Specifies a regular expression that an <input> element's value is checked against.
A regular expression, or regex for short, is a pattern describing a certain amount of text.
A regular expression, or regex for short, is a pattern describing a certain amount of text.
FOR HOME WORK PRACTICE
Create the following forms :
1.
2.
3.
NOTES FOR READING
PART 2
FOR VIDEO TUTORIAL CLICK HERE
TOPICS
About Action attribute of <form> tag
Few attributes of <input> tag
Creating Drop-down list box
Attributes of <select> tag
<textarea> tag
Attributes of <textarea> tag
Action attribute of <form> tag
The Action attribute is used to specify where the form data is to be sent to the server after submission of the form.
Action=“URL” - It is used to specify the URL of the document where the data to be sent after the submission of the form.
I have created a php script on my website which will give a response after submitting form to it, so specify the script in action attribute of forms you create...
<form action=“https://exza.in/response.php”>
The response.php web page will collect the form data and display back the contents.
<select> tag is used to create drop-down list box consisting of a number of options, which a user can choose.
Each option is defined by an <option> tag.
In previous simple form example no. 1 add a dropdown list for selecting City.
Attributes of <select> tag
name – Defines a name for the drop-down list.
size – Defines the number of visible options in a drop-down list.
multiple – Specifies that multiple options can be selected at once.
selected – It specifies that an option should be pre-selected when the page loads. (for <option> tag)
E.g. <select name=“city” size=3 MULTIPLE>
required – Specifies that the user is required to select a value before submitting the form.
autofocus – Specifies that the drop-down list should automatically get focus when the page.
disabled – Specifies that a drop-down list should be disabled.
E.g. <select name=“city” size=3 MULTIPLE AUTOFOCUS>
Creating multi-line text box
<textarea> tag is used to create multi-line text box in HTML.
The textarea element can hold unlimited number of characters.
The size of the box can be defined by cols and rows attributes.
In previous simple form example no. 1 add a textarea for Address.
Attributes of <textarea> tag
name – Specifies a name for a text area.
rows – Specifies the visible number of lines in a text area.
cols – Specifies the visible width of a text area.
maxlength – Specifies the maximum number of characters allowed in the text area.
E.g. <textarea name=“address” cols=31 rows=5 maxlength=100>
required – Specifies that a text area is required. It must be filled out before submitting form.
autofocus – Specifies that the textarea should automatically get focus when the page loads.
readonly – Specifies that a text area should be read only (you cannot change).
placeholder – Specifies a short hint that describes the expected value of a text area.
disabled – Specifies that textarea should be disabled.
FOR HOME WORK PRACTICE
4.
4.
5.
