Scribd
Upload
4 views

Forms

The document provides an overview of HTML forms, detailing various elements such as <form>, <input>, <textarea>, and controls like radio buttons and checkboxes. It includes syntax examples and explanations for creating user input fields, labels, and submit buttons, along with the use of <fieldset> for grouping related information. Additionally, a complete registration form example is presented to illustrate the application of these elements.

Uploaded by

mangalam senthil
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Forms

The document provides an overview of HTML forms, detailing various elements such as <form>, <input>, <textarea>, and controls like radio buttons and checkboxes. It includes syntax examples and explanations for creating user input fields, labels, and submit buttons, along with the use of <fieldset> for grouping related information. Additionally, a complete registration form example is presented to illustrate the application of these elements.

Uploaded by

mangalam senthil
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Forms

The HTML <form> element provide a document section to take input from
user. It provides various interactive controls for submitting information to
web server such as text field, text area, password field, etc.

Syntax:

<form>
//Form elements
</form>

HTML <input> element

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.

Example:

<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>

Output:
HTML TextField Control

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>

Output:

HTML <textarea> tag in 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.

Example:

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

Output:

Label Tag in 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>

Output:
HTML Password Field Control

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>

Output:

Radio Button Control

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>

Checkbox Control

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="hockey"/
>
<label for="hockey">Hockey</label>
</form>

Output:
Submit button control

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.

Syntax:

<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.

Example:

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

Output:
HTML <fieldset> element:

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.

Example:

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

Output:
HTML Form Example

Following is the example for a simple form of registration.

<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<h2>Registration form</h2>
<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/
>Male <br>
<input type="radio" id="gender" name="gender" value="female"/
>Female<br/>
<input type="radio" id="gender" name="gender" value="others"/
>others <br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>
</body>
</html>

Output:

You might also like