HTML Forms: © Krupa Shah
HTML Forms: © Krupa Shah
FORMS
St.Xavier’s College
© Krupa Shah
HTML FORM EXAMPLE
First Name :
Last Name :
THE <FORM> ELEMENT
<form action="/action_page.php"method="get">
or:
Example
<form action="/action_page.php"method="post">
WHEN TO USE GET?
The default method when submitting form data is
GET.
However, when GET is used, the submitted form data
will be visible in the page address field:
/action_page.php?firstname=Mickey&lastname=Mouse
Notes on GET:
Appends form-data into the URL in name/value pairs
The length of a URL is limited (about 3000 characters)
Never use GET to send sensitive data! (will be visible
in the URL)
Useful for form submissions where a user want to
bookmark the result
GET is better for non-secure data, like query strings in
Google
WHEN TO USE POST?
Example
<select name="cars"size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
ALLOW MULTIPLE SELECTIONS:
Use the multiple attribute to allow the user to
select more than one value:
Example
<select name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
THE <TEXTAREA> ELEMENT
The <textarea> element defines a multi-line input field (a text
area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a
text area.
The cols attribute specifies the visible width of a text area.
This is how the HTML code above will be displayed in a browser:
You can also define the size of the text area by using CSS:
Example
<textarea name="message" style="width:200px; height:600px">
The cat was playing in the garden.
</textarea>
THE <BUTTON> ELEMENT
The <button> element defines a
clickable button:
Example
<button type="button" onclick="alert('Hello
World!')">Click Me!</button>
This is how the HTML code above will be
displayed in a browser:
Click Me!
Note: Always specify the type attribute for the
button element. Different browsers may use
different default types for the button element.
HTML5 FORM ELEMENTS
Example
<form>
Quantity:
<input type="number" name="points" min="0" m
ax="100" step="10" value="30">
</form>
INPUT TYPE RANGE
Tag Description
<input Specifies
type=""> the input
type to
display
HTML INPUT ATTRIBUTES
The value Attribute
Example
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>
THE READONLY ATTRIBUTE
The novalidate attribute is a <form>attribute.
When present, novalidate specifies that the form
data should not be validated when submitted.
Example
Indicates that the form is not to be validated on
submit:
<form action="/action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
THE AUTOFOCUS ATTRIBUTE
Last
name: <input type="text" name="lname" form="form1">
THE FORMACTION ATTRIBUTE
The formaction attribute specifies the URL of a file that will
process the input control when the form is submitted.
The formaction attribute overrides the action attribute of
the <form> element.
The formaction attribute is used
with type="submit" and type="image".
Example
An HTML form with two submit buttons, with different
actions:
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/action_page2.php"
value="Submit as admin">
</form>
THE FORMENCTYPE ATTRIBUTE
The formenctype attribute specifies how the form data should
be encoded when submitted (only for forms with
method="post").
The formenctype attribute overrides the enctype attribute of
the <form> element.
The formenctype attribute is used
with type="submit" and type="image".
Example
Send form-data that is default encoded (the first submit
button), and encoded as "multipart/form-data" (the second
submit button):
<form action="/action_page_binary.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
THE FORMMETHOD ATTRIBUTE
The formmethod attribute defines the HTTP method for
sending form-data to the action URL.
The formmethod attribute overrides the method attribute of
the <form> element.
The formmethod attribute can be used
with type="submit" and type="image".
Example
The second submit button overrides the HTTP method of the
form:
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" value="Submit using
POST">
</form>
THE FORMNOVALIDATE ATTRIBUTE
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
THE MIN AND MAX ATTRIBUTES
The min and max attributes specify the minimum and
maximum values for an <input> element.
The min and max attributes work with the following input
types: number, range, date, datetime-local, month, time and
week.
Example
<input> elements with min and max values:
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Tag Description