Scribd
Upload
12 views

forms_html

Html forms

Uploaded by

palakarora10107
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
12 views

forms_html

Html forms

Uploaded by

palakarora10107
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Forms in HTML

Forms
• HTML forms are used for collecting user input on web pages.
• They enable users to submit data, which can be processed, stored, or returned
by a server.
• Forms serve as the gateway between the user and the server, allowing for
dynamic, interactive web experiences.
• Forms make websites more engaging and functional.
• Inside form tags, you'll place various form controls like text fields, checkboxes,
radio buttons, and buttons for submitting the form.
• Syntax:
<form>
.
.
</form>
HTML Form Elements
The <label> element
• The <label> tag defines a label for many form elements.
• The for attribute of the <label> tag should be equal to the id attribute
of the <input> element to bind them together.
The <input> element
• The <input> tag is commonly used to create form controls.
• It is the most used form element.
Syntax:
<input type="" name="" value="">
(Further see in the ppt the syntax of <input>)

• The default width of text input fields is 20 characters.


• Text Fields
The <input type="text"> defines a single-line input field for text input.
It is the most basic form of input and is widely used for collecting simple text data.

<form>
<label for="fname">First name of the student:</label><br>
<input type="text" id="fname" name="fname" value="Ananya"><br>
<label for="lname">Last name of the student</label><br>
<input type="text" id="lname" name="lname" value="Sharma">
</form>
The <Select> element
• The <select> element defines a drop-down list.
• By default, the first item in the drop-down list is selected.
• Example:
<label for="Courses">Choose a course:</label>
<select id="courses" name="courses">
<option value="B.Tech">B.Tech</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Com">B.Com</option>
</select>

• The size attribute to specify the number of visible values


<select id="courses" name="courses" size="3">
• The <textarea> element
• The <textarea> element defines a multi-line input field (a text area)
• Example:
<textarea name="message" rows="40" cols="30">We are understanding textarea element
</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.

• You can also define the size of the text area by using CSS:
<textarea name="message" style="width:400px; height:200px;">Let's understand
this</textarea>
• The <button> element
The <button> element defines a clickable button:
Example:

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('May you have a good day')">Click this button</button>
</body>
</html>
• The <fieldset> and <legend> Elements

• The <fieldset> element is used to group related data in a form.


• The <legend> element defines a caption for the <fieldset> element.
Example:

<form>
<fieldset>
<legend>Names</legend>
<label for="fname">First name of the student:</label><br>
<input type="text" id="fname" name="fname" value="Ananya"><br>
<label for="lname">Last name of the student:</label><br>
<input type="text" id="lname" name="lname" value="Sharma"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
• The <datalist> Element

• The <datalist> element specifies a list of pre-defined options for an <input> element.
• Users will see a drop-down list of the pre-defined options as they input data.
• The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
Example:

<form>
<input list="Courses" name="Courses">
<datalist id="Courses">

<option value="B.Tech">
<option value="BCA">
<option value="BBA">
<option value="B.Com">

</datalist>
<input type="submit">
</form>
HTML Input Types
• <input type="text"> defines a single-line text input field.
• <input type="password"> defines a password field.
• <input type="reset"> defines a reset button that will reset all form
values to their default values
• <input type="email"> is used for input fields that should contain an e-
mail address.
HTML Input Types
• Checkboxes
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example:
<form>
<input type="checkbox" id="degree1" name="degree1" value="graduation">
<label for="degree1">Graduation</label><br>
<input type="checkbox" id="degree2" name="degree2" value="post-graduation">
<label for=“degree2">Post-graduation</label><br>
</form>
• Radio Buttons
• Radio buttons let a user select ONLY ONE of a limited number of choices.
Example:
<p>Choose your city</p>
<form>
<input type="radio" id="Delhi" name="address" value="Delhi">
<label for="Delhi">Delhi</label><br>
<input type="radio" id="Pune" name="address" value="Pune">
<label for="Pune">Pune</label><br>
<input type="radio" id="Jaipur" name="address" value="Jaipur">
<label for="Jaipur">Jaipur</label><br>
</form>
• The Submit Button
• 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 of the student</label><br>
<input type="text" id="fname" name="fname" value="Riya"><br>
<label for="lname">Last name of the student</label><br>
<input type="text" id="lname" name="lname" value="Sharma"><br><br>
<input type="submit" value="Submit the form">
</form>

If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".
HTML Form Attributes
• The Action Attribute
• 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.

<form action="/action_page.php">

• If the action attribute is omitted, the action is set to the current page
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.

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

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!)

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.
The Autocomplete Attribute
• The autocomplete attribute specifies whether a form should have autocomplete on
or off.

• When autocomplete is on, the browser automatically complete values based on


values that the user has entered before.

• Fill in and submit the form, then reload the page, start to fill in the form again - and
see how autocomplete works.

• Example:
<form action="/action_page.php" autocomplete="on">
HTML Input Attributes
• The input value attribute specifies an initial value for an input field.
<input type="text" id="fname" name="fname" value="Jiya" readonly>

• The input disabled attribute specifies that an input field should be


disabled.The value of a disabled input field will not be sent when submitting
the form.
<input type="text" id="fname" name="fname" value="Jiya" disabled><br>

• The input size attribute specifies the visible width, in characters, of an input
field.
<input type="text" id="fname" name="fname" size="30">

You might also like