Acf0c659 1617593865392

HTML Form
An HTML form is a section of a document which contains controls

such as text fields, password fields, checkboxes, radio buttons, submit
button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to
the server for processing such as name, email address, password, phone
number, etc. .
HTML forms are required if you want to collect some data from of the
site visitor.
For example: If a user want to purchase some items on internet,
he/she must fill the form such as shipping address and credit/debit card
details so that item can be sent to the given address.
<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>
HTML Form
Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.
<datalist> It specifies a list of pre-defined options for input control.
<keygen> It defines a key-pair generator field for forms.
<output> It defines the result of a calculation.
HTML Form
The HTML <input> element is fundamental form element. It is used to
create form fields, to take input from user.
We can apply different input filed to gather different information
form user. Following is the example to show the simple text input.
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>
HTML Form
The type="text" attribute of input tag creates textfield control also
known as single line textfield control.
<form>
First Name: <input type="text" name="firstname"/> <br/>
Last Name: <input type="text" name="lastname"/> <br/>
</form>
The <textarea> tag in HTML is used to insert multiple-line text in a

form.
The size of <textarea> can be specify either using "rows" or "cols"
attribute or by CSS.
HTML Form
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>
HTML Form
It is considered better to have label in form.
 As it makes the code parser/browser/user friendly.
If you click on the label tag, it will focus on the text control.
 To do so, you need to have for attribute in label tag that must be
same as id attribute of input tag.
<form>
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>
HTML Form
The password is not visible to the user in password field control.
<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
HTML Form
The radio button is used to select one option from multiple options. It
is used for selection of gender, quiz questions etc.
If you use one name for all the radio buttons, only one radio button can
be selected at a time.
Using radio buttons for multiple options, you can only choose a single
option at a time.
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/
>Female <br/>
</form>
HTML Form
The checkbox control is used to check multiple options from given
checkboxes.
<form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" value="football"
/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hoc
key"/>
<label for="hockey">Hockey</label>
</form>

HTML Form
HTML <input type="submit"> are used to add a submit button on web
page. When user clicks on submit button, then form get submit to the
server.
<input type="submit" value="submit">
The type = submit , specifying that it is a submit button
The value attribute can be anything which we write on button on web
page.
The name attribute can be omit here.

HTML Form
<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</form>

HTML Form
 The <fieldset> element in HTML is used to group the related
information of a form.
 This element is used with <legend> element which provide caption for
the grouped elements.
<form>
<fieldset>
<legend>User Information:</legend>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</fieldset>
</form>
HTML Form
<!DOCTYPE html>
<html>
<body>
<h2>The name Attribute</h2>
<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>
<p>If you click the "Submit" button, the form-data will be sent to a page
called "/action_page.php".</p>
<p>Notice that the value of the "First name" field will not be submitted,
because the input element does not have a name attribute.</p>
</body>
</html>
HTML Form
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.
In the example below, the form data is sent to a file called
"action_page.php".
This file contains a server-side script that handles the form data:
HTML Form
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<input type="text" id="fname" name="fname" value="Fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Lname"><br><br>
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page
called "/action_page.php".</p>
</body>
</html>
HTML Form
The target attribute specifies where to display the response that is
received after submitting the form.
The target attribute can have one of the following values:
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 default value is _self which means that the response will open in
the current window.
HTML Form
<!DOCTYPE html>
<html>
<body>
<h2>The form target attribute</h2>
<p>When submitting this form, the result will be opened in a new
browser tab:</p>
<form action="/action_page.php" target="_blank">
</form>
</body>
</html>
HTML Form
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
HTML Form
<!DOCTYPE html>
<html>
<body>
<h2>The method Attribute</h2>
<p>This form will be submitted using the GET method:</p>
<form action="/action_page.php" target="_blank" method="get">
</form>
<p>After you submit, notice that the form values is visible in the address
bar of the new browser tab.</p>
</body>
</html>
HTML Form
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
<!DOCTYPE html>
<html>
<body>
<h2>The method Attribute</h2>
<p>This form will be submitted using the POST method:</p>
<form action="/action_page.php" target="_blank" method="post">
</form>
<p>After you submit, notice that, unlike the GET method, the form values is NOT visible in the address bar of the new browser
tab.</p>
</body>
</html>
HTML Form
<!DOCTYPE html>
<html>
<body>
<h1>The form novalidate attribute</h1>
<p>The novalidate attribute indicates that the form input is not to be
validated on submit:</p>
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The novalidate attribute of the form tag is
not supported in Safari 10 (or earlier).</p>
</body>
</html>
HTML Form

Acf0c659 1617593865392

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Acf0c659 1617593865392

Uploaded by

Copyright:

Available Formats

HTML Form

An HTML form is a section of a document which contains controls

The <textarea> tag in HTML is used to insert multiple-line text in a

You might also like