Scribd
Upload
29 views

HTML Forms

The document discusses various HTML form elements and their attributes. It explains that an HTML form is used to collect user input which is then sent to a server. The <form> tag creates a form container. Common form elements include <input>, <textarea>, <select>, <button>, and <label>. The <input> element is the most frequently used and can be configured as text, password, radio, checkbox, submit, reset, email, file and other input types. Attributes like name, value, type etc. are used to configure the input fields.

Uploaded by

Aamir Malik
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
29 views

HTML Forms

The document discusses various HTML form elements and their attributes. It explains that an HTML form is used to collect user input which is then sent to a server. The <form> tag creates a form container. Common form elements include <input>, <textarea>, <select>, <button>, and <label>. The <input> element is the most frequently used and can be configured as text, password, radio, checkbox, submit, reset, email, file and other input types. Attributes like name, value, type etc. are used to configure the input fields.

Uploaded by

Aamir Malik
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

HTML Forms

An HTML form is used to collect user input. The user input is most often sent
to a server for processing.

For example during user registration you would like to collect information such
as name, email address, credit card, etc.

The <form> tag is used to create a form for user input in Html.
Syntax: <form>
.
form elements
.
</form>
It is a container for different types of input elements

HTML Forms
The HTML <input> element is the most used form
element.

An <input> element can be used in many ways,


depending on the type attribute.

The <input> Element


The <input type="text"> defines a single-line input field for text input.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
</body>
</html>
Note1: The <label> tag defines a label for several elements
Note2: Default width of text input fields is 20 characters.
Text Fields(<input type="text">)
Following is the list of attributes for <input> tag for creating text field.

Attribute Description
Type Indicates the type of input control and for text
input control it will be set to text.

Name Used to give a name to the control which is sent


to the server to be recognized and get the value.

Value This can be used to provide an initial value


inside the control.
Size Allows to specify the width of the text-input
control in terms of characters.
Maxlength Allows to specify the maximum number of
characters a user can enter into the text box.

Attributes of text-input(<input type=“text”>)


 Each input field must have a name attribute to be submitted.

 Ifthe name attribute is omitted, the value of that input field will
not be sent at all.

Example:
 This example will not submit the value of the "First name" input
field: 
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

The Name Attribute


 The input placeholder attribute specifies a short hint that
describes the expected value of an input field (a sample value or a
short description of the expected format).
 The short hint is displayed in the input field before the user enters a
value.
 The placeholder attribute works with the following input types:
text, search, url, tel, email, and password.
Example:
An input field with a placeholder text:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone" placeholder="10 digit
number” pattern="[0-9]{10}">
</form>
The placeholder Attribute
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.
Rows: Indicates the number of rows of text area box.
Cols: Indicates the number of columns of text area box
Example:
<!DOCTYPE html>
<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>

Textarea-Multiple-Line Text Input Controls


 
<input type="password"> defines a password field. It masks the
character as soon as a user enters it.

Example:
<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

Input Type Password


The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

Attributes:
Value: The value that will be used if the radio box is selected.
Checked: Set to checked if you want to select it by default.

Radio Buttons-input control


The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example:

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>
Attributes:
Value : The value that will be used if the checkbox is selected.
Checked: Set to checked if you want to select it by default.

Checkboxes-input control
The <select> element defines a drop-down list.
Example:
<form>
<label for="Programming Language">Choose a Programming Language:</label>
<select id="program" name="program"> <!-- size="3", multiple="3", selected,
label="Vol"-->
<option value="volvo">C</option>
<option value="saab">C++</option>
<option value="fiat">Java</option>
<option value="audi">Python</option>
</select>
</form>

The <option> elements defines an option that can be selected.


By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:

The <select> Element


Attribute Description

name Used to give a name to the control which is sent to


the server to be recognized and get the value.

size This can be used to present a scrolling list box.

multiple If set to "multiple" then allows a user to select


multiple items from the menu.

value The value that will be used if an option in the select


box is selected.

selected Specifies that this option should be the initially


selected value when the page loads.

label An alternative way of labeling options

Attributes:
The <input type="submit"> defines a button for submitting the form data
to a form-handler.

The form-handler is typically a file on the server with a script for processing
input data.

The form-handler is specified in the form's action attribute.

Example:
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value=“Rohit"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value=“Sharma"><br><br>
  <input type="submit" value="Submit">
</form>

The Submit Button


 The action attribute defines the action to be performed when the
form is submitted.

 Usually, the form data is sent to a file on the server when the user
clicks on the submit button.

 Ifthe form data is sent to a file called "action_page.php". This file


contains a server-side script that handles the form data:
<form action="/action_page.php">

 Ifthe action attribute is omitted, the action is set to the current


page.

The Action Attribute


 Themethod attribute specifies the HTTP method to use used
when submitting the form data.

 Theform-data can be sent as URL variables (with


method="get") or as HTTP post transaction (with
method="post").

 The default HTTP method when submitting form data is GET. 

Eg: <form action="/action_page.php" method="get">


<form action="/action_page.php" method="post">

The Method attribute


Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default
values:
Example
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>

Reset Button
The <button> element defines a clickable button:
Example:

<!DOCTYPE html>
<html>
<body>

<h2>The button Element</h2>

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

</body>
</html>

The <button> Element


 The <input type="email"> is used for input fields that should
contain an e-mail address.
 Depending on browser support, the e-mail address can be
automatically validated when submitted.
 Some smartphones recognize the email type, and add ".com" to the
keyboard to match email input.
Example:
<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

Input Type Email


 The <input type="file"> defines a file-select field and a
"Browse" button for file uploads.
 Example:
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
<input type="submit" name="" value="Submit">
</form>

Input Type File


Thank you

You might also like