Scribd
Upload
2 views

Forms

HTML Forms are essential for collecting user data and can post this data to back-end applications for processing. Various form elements like text fields, checkboxes, and radio buttons can be created using the <form> tag and specific input types. Additionally, HTML comments can be used to enhance code readability and understanding.

Uploaded by

kaanphodgaana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Forms

HTML Forms are essential for collecting user data and can post this data to back-end applications for processing. Various form elements like text fields, checkboxes, and radio buttons can be created using the <form> tag and specific input types. Additionally, HTML comments can be used to enhance code readability and understanding.

Uploaded by

kaanphodgaana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

FORMS in HTML

HTML Forms are required to collect some data. A form will take input and then post it to a back-
end application such as CGI, ASP Script or PHP script etc. The back-end application will perform
required processing on the passed data based on defined business logic inside the application.

There are various form elements available like text fields, text-area fields, drop-down menus,
radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form:

<form name=”f1” action="Script URL" method="GET|POST">


form elements like input, textarea etc.
</form>

Form Controls
There are different types of form controls:

 Text Input Controls


 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 Clickable Buttons
 Submit and Reset Button

Text Input Controls


There are three types of text input used on forms:

 Single-line text input controls - This control is used for items that require only one line
of user input, such as search boxes or names. They are created using HTML <input> tag.
 Password input controls - This is also a single-line text input but it masks the character
as soon as a user enters it. They are also created using HTMl <input> tag.
 Multi-line text input controls - This is used when the user is required to give details that
may be longer than a single sentence. Multi-line input controls are created using HTML
<textarea> tag.

Single-line text input controls


This control is used for items that require only one line of user input, such as search boxes or
names. They are created using HTML <input> tag.

Name: <input type="text" name="name" />


Attributes

Following is the list of attributes for <input> tag for creating text field.

Attribute Description

type Indicates the type of input control and for text input control it will be set to text.

Used to give a name to the control which is sent to the server to be recognized and
name
get the value.

value This can be used to provide an initial value inside the control.

size Allows to specify the width of the text-input control in terms of characters.

Allows to specify the maximum number of characters a user can enter into the text
maxlength
box.

Password input controls


This is also a single-line text input but it masks the character as soon as a user enters it. They are
also created using HTML <input> tag but type attribute is set to password.

Password: <input type="password" name="password" />

Multiple-Line Text Input Controls


This is used when the user is required to give details that may be longer than a single sentence.
Multi-line input controls are created using HTML <textarea> tag.

Feedback : <br />


<textarea rows="5" cols="50" name="feed">
Enter your feedback here...
</textarea>

Checkbox Control
Checkboxes are used when more than one option is required to be selected. They are also created
using HTML <input> tag but type attribute is set to checkbox.

<input type="checkbox" name="maths" value="on"> Maths


<input type="checkbox" name="physics" value="on"> Physics
Radio Button Control
Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to radio.

<input type="radio" name="subject" value="maths"> Maths


<input type="radio" name="subject" value="physics"> Physics

Select Box Control


A select box, also known as drop down box which provides option to list down various options
in the form of drop down list, from where a user can select one or more options.

<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>

Selected attribute is used to display option list displayed by default.

Button Controls
You can create a clickable button using <input> tag by setting its type attribute to button. The
type attribute can take the following values:

<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
</form>

HTML Comments

Comment is a piece of code which is ignored by any web browser. It is a good practice to add
comments into your HTML code. Comments help others understand your code and increases
code readability.

HTML comments are placed in between <!- - ... - -> tags.

<head> <!-- Document Header Starts -->

You might also like