Forms In Html 5
HTML Form
is a document which stores information of a user on a web server using
interactive controls. An HTML form contains different kind of information such
as username, password, contact number, email id etc.
Form controls A form is a collection of different
elements also called as controls like textbox, radio button, checkbox, submit
button and many more.
Attributes used
with form element and Input element.
<Form> tag can have following attributes
Name : It
specifies a name to a form.
Action : The
action attribute specifies the path where the form is to be submitted. When
user clicks on submit button if the action attribute is committed, the action
is set to the current page.
Method : The method attribute specifies get or post
method to be used when submitting the form data. Method of form are GET or
POST.
i) GET method : The default method of submitting form data is GET. The data submitted by using GET is visible in the address bar. It is better for data which is not sensitive. The number of characters in GET method depends on browser.
ii)
POST Method : The POST method of sending
data does not display the form data in the address bar. So it is a secure
method to submit sensitive personal information. It does not have size
limitations as in GET method
The <Input> tag The <Input> tag is used to specify the different types of controls by using type attribute. Syntax of using <Input> with type attribute is;
Forms Example: 1
<!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="Rupesh"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname"
name="lname" value="Saket"> </form>
<p>Note that the form itself is
not visible.</p>
<p>Also note that the default
width of text input fields is 20 characters.</p>
</body> </html> |
|
Attribute |
Description
|
|
Type
|
It describes, the name of the control like
text radio etc. eg type = "radio"
|
|
Name
|
Each input field must have a name. The name
attribute is a user defined value. If the name attribute is not specified,
the data of that input field will not get submitted.
|
|
Maxlength
|
This attribute is used with text and
password type. It specifies the maximum number of characters which can be
entered in a text or password box.
|
|
Size
|
The 'Size' attribute can be used with text
and password type. It specifies the width of the text box.
|
|
Checked
|
The 'Checked' attribute specifies the
default selection for options in a checkbox or radio button.
|
|
Value
|
The 'Value' attribute can be used with
text, checkbox, radio, submit or reset. 1.
When used with text type it specifies default value in a text box.
2.
For checkbox and radio it defines value which is sent on submit
|
The
<label> tag in HTML is used to provide a usability improvement for mouse
users i.e, if a users clicks on the text within the <label> element, it
toggles the control. The <label> tag defines the label for
<button>, <input>, <meter>, <output>, <progress>,
<select>, or <textarea> element.
<Textarea> tag
: The <textarea> is used to create a textbox with multiple lines.
The number of lines and width of the textbox are specified by using rows and
cols attribute respectively. The <textarea> can have following
attributes.
name : It is used to specify name for the textarea. For example name = "ta1". rows : It specifies the number of lines in a textarea. For example rows = "5" cols : It specifies the width of a text area.
maxlength : It specifies the maximum number of characters allowed in the textarea.
placeholder : It specifies a short hint that describes
the expected value of a textarea. For example placeholder = "your
address" required : It specifies
that textarea must be filled out. i.e. It can not be blank.
Syntax : <textarea name = "tal" rows =
"5" cols = "30" placeholder = "your address"
required> </textarea>
<Select> tag : <select> tag is
used. to create drop-down list.
The attributes of <select> tag are :
1) Name - Assigns name to the control.
2) Multiple - It allows the user to select more than
one value
3) Size - The size attribute is used to specify the
number of visible values.
The <option> tag inside the <select> tag
defines the available options in the list.
The attributes of <option> tag are :
1) selected : To define preselected option, 'selected'
attribute is added to the <option>
2) value : It assigns value to the option specified in
the dropdown list.
Forms Example 2 : Text area in forms
|
<!DOCTYPE html> <html> <body>
<h1>Text Area In
Html</h1>
<form
action="/action_page.php"> <label
for="laucnchpad">Mode Of Payment</label> <br> <textarea id="launchpad"
name="w3review" rows="5" cols="70">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provide
ibus molestias illo sit ducimus?
By cheque
By Cash
By Credit Cash
</textarea>
<br><br>
<input type="submit" value="Submit"> </form>
<p>Click the "Submit"
button and the form-data will be sent to a page on the server called
"action_page.php".</p> </body> </html> |
Output:
Forms Example 3: Radio buttons
<Input type = "button"> : It displays
push button which activates on events.
|
<!DOCTYPE html> <html> <body>
<h2>Radio Buttons</h2>
<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>
</body> </html> |
Output:
Forms Example 4 : Check Box
<Input type = "checkbox"> :Creates a
checkbox. It allows more than one selection against multiple choices
|
<!DOCTYPE html> <html> <body>
<h3>Checkboxes</h2> <h2>The input
type="checkbox" defines a checkbox:<h2>
<form
action="/action_page.php">
<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><br><br>
<input type="submit" value="Submit"> </form>
</body> </html> |
Output:
Forms Example 5 : Basic Form
|
<!DOCTYPE html> <html>
<head>
<title>Forms In Html</title> </head>
<body
bgcolor="lightpink">
<h1>Forms in html with Input elements</h1>
<form>
Enter your name: <input type="text" Name="n1"
maxlength="20"><Br> <br>
Enter your standard : <input
type="radio"name="r1" value="11">
11<sup>th</sup> <input type="radio"
name="r1" value="12">12<sup>th
</sup><br> <br>
Choose your optional subjects : <br> <br>
<input type="checkbox" name="c1"
Value="Hindi">Hindi<br> <br>
<input type="checkbox"
name="c1"Value="German">German<br> <br>
<input type="checkbox" name="c1"
Value="Biology">Biology<br> <br>
<input type="checkbox"name="c1"
Value="IT">IT<br> <br>
<input type="submit"
value="Submit"><br> </form> </body>
</html> |
output:
Posts
0 Comments
Please do not enter any spam links in the comment box