Scribd
Upload
2 views

Working with forms

The document provides an overview of HTML forms, detailing the <form> and <input> elements used to collect user input. It explains various attributes associated with forms, such as action, method, and input-specific attributes like value, readonly, and required. Additionally, it covers different input types and their functionalities, including text fields, checkboxes, and submit buttons.

Uploaded by

sreeee437
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Working with forms

The document provides an overview of HTML forms, detailing the <form> and <input> elements used to collect user input. It explains various attributes associated with forms, such as action, method, and input-specific attributes like value, readonly, and required. Additionally, it covers different input types and their functionalities, including text fields, checkboxes, and submit buttons.

Uploaded by

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

Working with forms

HTML Forms

• An HTML form is used to collect user input. The user input is most
often sent to a server for processing.
• The <form> Element
• The HTML <form> element is used to create an HTML form for user
input:
• <form>
.
form elements
.
</form>
• The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.
• The <input> Element
• The HTML <input> element is the most used form element.
• An <input> element can be displayed in many ways, depending on the
type attribute.
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one
of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or
more of many choices)
<input type="submit"> Displays a submit button (for submitting
the form)
<input type="button"> Displays a clickable button
Form Attributes
• The Action Attribute
• The action attribute defines the action to be performed when the form is
submitted.
• <form action="/action_page.php">
<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"><br><br>
<input type="submit" value="Submit">
</form>
The Target Attribute
The target attribute specifies where to display the response that is received after submitting the form.

Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the window

framename The response is displayed in a named iframe


The Method Attribute
The method attribute specifies the HTTP method to be used when submitting the form data.
The form-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.
Notes on GET:
•Appends the form data to the URL, in name/value pairs
•NEVER use GET to send sensitive data! (the submitted form data is visible
in the URL!)
•The length of a URL is limited (2048 characters)
•Useful for form submissions where a user wants to bookmark the result
•GET is good for non-secure data, like query strings in Google
Notes on POST:
•Appends the form data inside the body of the HTTP request (the submitted
form data is not shown in the URL)
•POST has no size limitations, and can be used to send large amounts of
data.
•Form submissions with POST cannot be bookmarked
HTML Input Attributes

• The value Attribute


• The input value attribute specifies an initial value for an input field:
• <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>
The readonly Attribute

• The input readonly attribute specifies that an input field is read-only.


• A read-only input field cannot be modified (however, a user can tab to
it, highlight it, and copy the text from it).
• <form>
<label for="fname">First
name:</label><br><input type="text" id="fname" name="fname" val
ue="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
The disabled Attribute

• The input disabled attribute specifies that an input field should be disabled.
• A disabled input field is unusable and un-clickable.
• The value of a disabled input field will not be sent when submitting the
form!
• <form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br
>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
The size Attribute

• The input size attribute specifies the visible width, in characters, of an


input field.
• The default value for size is 20.
• <form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>
The maxlength Attribute

• The input maxlength attribute specifies the maximum number of


characters allowed in an input field.
• <form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
The min and max Attributes
The input min and max attributes specify the minimum and maximum values for an input field.
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-
31"><br><br>

<label for="datemin">Enter a date after 2000-01-01:</label>


<input type="date" id="datemin" name="datemin" min="2000-01-
02"><br><br>

<label for="quantity">Quantity (between 1 and 5):</label>


<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
The multiple Attribute

• The input multiple attribute specifies that the user is allowed to enter
more than one value in an input field.
• The multiple attribute works with the following input types: email,
and f
• <form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form> ile.
The placeholder 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 placeholder attribute works with the following input types: text,
search, url, number, tel, email, and password.
The required Attribute

• The input required attribute specifies that an input field must be filled
out before submitting the form.
• <form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>
The autofocus Attribute

• The input autofocus attribute specifies that an input field should


automatically get focus when the page loads.
• <form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Text Fields
The <input type="text"> defines a single-line input field for text
input.

<form>
First name:
<input type="text" id="fname" name="fname"><
br>
Last name:
<input type="text" id="lname" name="lname">
</form>

You might also like