Scribd
Upload
9 views7 pages

WT 2

Web forms are essential for user interaction on websites, allowing data entry for processing and storage. HTML forms include various input controls such as text fields, checkboxes, and buttons, enabling users to submit information like names and addresses. The document outlines the syntax and usage of different HTML form elements, including <form>, <input>, <textarea>, and <fieldset>, along with examples for clarity.

Uploaded by

Dr. SATHIYA M
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views7 pages

WT 2

Web forms are essential for user interaction on websites, allowing data entry for processing and storage. HTML forms include various input controls such as text fields, checkboxes, and buttons, enabling users to submit information like names and addresses. The document outlines the syntax and usage of different HTML form elements, including <form>, <input>, <textarea>, and <fieldset>, along with examples for clarity.

Uploaded by

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

WEB FORMS

Web forms are one of the main points of interaction between a user and a website or application. Forms allow
users to enter data, which is generally sent to a web server for processing and storage.

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

Why use HTML Form


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.

HTML Form Syntax

<form action="server url" method="get|post">

//input controls e.g. textfield, textarea, radiobutton, button

</form>

HTML Form Tags

Tag Description

It defines an HTML form to enter inputs


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

It defines a caption for a <fieldset>


<legend>
element.

<select> It defines a drop-down list.

It defines a group of related options in


<optgroup>
a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML <form> element


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.

The <form> element does not itself create a form but it is container
to contain all required form elements, such as <input>, <label>,
etc.

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.

Example:
<body>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</body>
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:
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:

HTML 5 Email Field Control


The email field in new in HTML 5. It validates the text for correct email address. You
must use @ and . in this field.

<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>

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.

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.

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:

KFK,

You might also like