Forms HTML

FORMS
The form is something that we fill out from the moment we are born till the moment we
die. The forms seems to exists everywhere on the web right from sign up forms to forms
for newsletters, sending emails and blah blah. Everywhere forms are used. It enables
visitors and users to communicate with you. Basically there are two parts of form : First
is the collection of fields, labels, check boxes, radio buttons, menus, that visitor sees on
your page and second is the processing script that takes information and convert into
required format. Any HTML document that contains form has section that contains
opening and closing <form> tag. The general syntax of form is as :
<form action=”script-url” method=”post”>

form content including submit button
</form>
The action attribute of the <form> tag contains the url of the script which is executed
when form is submitted. The method attribute sets the method by which browsers sends
the form data to the server for processing. There are two methods : POST and GET. If
method is not specified then by default GET is used. Let us see a simple code to
demonstrate the <form> tag :
<html>
<head>
<title>Forms</title>
</head>
<body>
<form action="" method="POST">
</form>
</body>
</html>
TextField
A textfield also known as textboxes is used to gather textual information like name,
addresses, comments, email-ID etc etc. To create a textbox, the type attribute of <input>
tag is set text. The general syntax of creating textfield is as :
<input type="text" name="element-name" size="numeric-value" maxlength="numeric-

value" value="default-text"/>
Let us see a code below to demonstrate the textfield :
© Copyright Sourabh Bhandari http://sourabhandari.in

<html>
<head>
<title>Forms with textfield</title>
</head>
<body>
Name : <input type="text" name="fullname" size="25" maxlength="30"
value="Enter your name here"/><br />
Email : <input type="text" name="email" size="25" maxlength="30"
value="Enter your email here"/>
</form>
</body>
</html>
The name attribute is required for each element of form to identify the input data to the
server. It uniquely identify the form element in the form. The size attribute specifies how
wide the textfield is and is set to numeric value. The maxlength attribute is defined to
specify the maximum number of characters that user can enter into the textfield. If you
want an initial value to be displayed in the textfield when HTML document loads, then
define value attribute and set it to the text you want to display.
Password field
The password field is used to accept passwords. The only difference between password
field and textfield is that whatever user typed in the password field is hidden by bullets
or asterisks. The information is not encrypted in anyway. All the attributes of the
textfield is applicable to password field except that type attribute is set to password. The
general syntax of creating password field is as :
<input type="password" name="element-name" size="numeric-value"

maxlength="numeric-value" value="default-text"/>
Let us see a code to demonstrate it :
<html>
<head>
<title>Forms with password</title>
</head>
<body>

value="Enter your email here"/>
Password : <input type="password" name="password" size="25"
maxlength="30" value="Enter your email here"/>
</form>
</body>
</html>
Textarea
A textarea is a large and multi-line textbox. The general syntax of creating Textarea is as
:
<textarea name="element-name" cols="numeric-value" rows="numeric-value">default-

text</textarea>
Let us see the code below :
<html>
<head>
<title>Forms with textarea</title>
</head>
<body>
value="Enter your email here"/><br />
maxlength="30" value="Enter your email here"/><br />
Comment : <textarea name="comment" cols="30" rows="6"
wrap="virtual">Place your comment here</textarea>
</form>
</body>
</html>
The name attribute have the same meaning as in textfield. The cols and rows attribute is
defines to specify the width and height of textarea respectively. The text wrapping is
controlled by specifying the wrap attribute, it can take value : off, virtual and physical. If

you want to display some initial text in textarea then place the text between the opening
and closing <textarea> tag.
Radio Buttons
Radio button creates multiple choice options for users. Users can select one options at a
time. Radio button is created by setting type attribute of the <input> tag to radio. Radio
button requires three attributes : type, name and value. The general syntax of creating
Textarea is as :
<input type="radio" name="element-name" value="element-value" />
Let us see the code below to demonstrate it :
<html>
<head>
<title>Forms with radio buttons</title>
</head>
<body>
wrap="physical" >Place your comment here</textarea><br />
Gender : <input type="radio" name="sex" value="male"
checked="checked" /> Male
<input type="radio" name="sex" value="female" /> Female
</form>
</body>
</html>
The value attribute is set to the value that will be passed to the processing script when
user selects the button. If you want radio button to be preselected when document load
then you can include the checked attribute and set to the value checked.
Selection Menu
The selection menu provides the user with the choice from a givens set of options. The

general syntax of creating selection menu is as :
<select name=”element-name” >

<option value=”option-value1”>option-name1</option>
</select>
<html>
<head>
<title>Forms with Selection Menu</title>
</head>
<body>
<input type="radio" name="sex" value="female" /> Female<br
/>
Department : <select name="department">
<option value="select">----SELECT----</option>
<option value="CSE">Department of
CSE</option>
<option value="ECE">Department of
ECE</option>
</select>
</form>
</body>
</html>

The menu options are enclosed in <option> tag. The value attribute specify the initial
value for an option. If it is not defined then initial value is set the text you placed
between the opening and closing <option> tag. If you want an option to be preselected
when document loads then set selected attribute to the value selected.
Checkbox
The radio buttons can select only one option at a time for user. A user can select as
many value as they like in checkboxes. The general syntax of creating checkbox is as :
<input type=”checkbox” name=”element-name” value=”element-value” />
Let us see a code below to demonstrate it :
<html>
<head>
<title>Forms with checkbox</title>
</head>
<body>
/>
CSE</option>
ECE</option>
</select><br />
Select the language you know : <input type="checkbox"
name="programming" value="C/C++" /> C/C++

<input type="checkbox"
name="programming" value="Java" /> Java
name="programming" value=".NET" /> .NET
name="programming" value="None" /> None<br />
</form>
</body>
</html>
The value attribute specify the initial value for an option. If you want an option to be
preselected when document loads then set selected attribute to the value selected.
File fields
The file field allows user to upload file from its hard drive to the web server. The file
field is created by setting the type attribute of <input> tag to the value file. The general
syntax of creating the file field is as :
<input type=”file” name=”element-name” size=”numeric-value” maxlength=”numeric-

value” accept=”MIME type” />
<html>
<head>
<title>Forms with file field</title>
</head>
<body>

/>
CSE</option>
ECE</option>
</select><br />
Upload your resume : <input type="file" name="resume" size="20"
maxlength="50" />
</form>
</body>
</html>
The file field appears as textfield with a browse button. The size attribute represents the
width of textfield, it accepts numeric value. The maxlength attribute represents the
number of characters that user can enter into the textfield, it accepts numeric value. The
accept attribute defines the MIME type of the file that user can upload on the server.
Hidden field
The hidden field contains the value that user/visitor can never see. These fields can be
generated by processing script to store information gathered from earlier forms and so
forth. The file field is created by setting the type attribute of <input> tag to the value
hidden. The general syntax of creating hidden field is as :
<input type=”hidden” name=”element-name” value=”element-value” />
Let us see a code below to demonstrate it :
<html>
<head>
<title>Forms with hidden field</title>

</head>
<body>
/>
CSE</option>
ECE</option>
</select><br />
maxlength="50" /><br />
<input type="hidden" name="formname" value="resumeservice" />
</form>
</body>
</html>
Submit and Reset Button

The submit button enables user to send the completed form to the webserver and reset
button enables user to clear the form. The submit button is created by setting the type

attribute of the <input> tag to the value submit. The general syntax of creating button is
as :
<input type=”submit” value=”element-value” name=”element-name” />
The reset button is created by setting the type attribute of the <input> tag to the value
reset. The general syntax of creating button is as :
<input type=”reset” value=”element-value” name=”element-name” />
Let us see a code demonstrate it :
<html>
<head>
<title>Forms with submit and reset button</title>
</head>
<body>
/>
CSE</option>
ECE</option>
</select><br />

<input type="hidden" name="formname" value="resumeservice" /><br />
<input type="submit" name="submit" value="submit" />
<input type="reset" name="reset" value="reset" />
</form>
</body>
</html>
Fieldset
The fieldset allows you to group a series of form controls visually. The general syntax of
fieldset is as :
<fieldset>
<legend>text</legend>
</fieldset>
Let us see a code to demonstrate it :
<html>
<head>
<title>Forms with fieldset</title>
</head>
<body>
<fieldset>
<legend>Personal Info </legend>

/>
CSE</option>
ECE</option>
</select><br />
<input type="hidden" name="formname" value="resumeservice" /><br />
<input type="submit" name="submit" value="submit" />
<input type="reset" name="reset" value="reset" />
</form>
</fieldset>
</body>
</html>

Forms HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Forms HTML

Uploaded by

Copyright:

Available Formats

FORMS

<form action=”script-url” method=”post”>

<input type="text" name="element-name" size="numeric-value" maxlength="numeric-

Let us see a code below to demonstrate the textfield :

© Copyright Sourabh Bhandari http://sourabhandari.in

<input type="password" name="element-name" size="numeric-value"

Let us see a code to demonstrate it :

© Copyright Sourabh Bhandari http://sourabhandari.in

<textarea name="element-name" cols="numeric-value" rows="numeric-value">default-

Let us see the code below :

© Copyright Sourabh Bhandari http://sourabhandari.in

<input type="radio" name="element-name" value="element-value" />

Let us see the code below to demonstrate it :

© Copyright Sourabh Bhandari http://sourabhandari.in

<select name=”element-name” >

Let us see the code below to demonstrate it :

© Copyright Sourabh Bhandari http://sourabhandari.in

<input type=”checkbox” name=”element-name” value=”element-value” />

Let us see a code below to demonstrate it :

© Copyright Sourabh Bhandari http://sourabhandari.in

<input type=”file” name=”element-name” size=”numeric-value” maxlength=”numeric-

Let us see the code below to demonstrate it :

© Copyright Sourabh Bhandari http://sourabhandari.in

<input type=”hidden” name=”element-name” value=”element-value” />

Let us see a code below to demonstrate it :

© Copyright Sourabh Bhandari http://sourabhandari.in

Submit and Reset Button

© Copyright Sourabh Bhandari http://sourabhandari.in

<input type=”submit” value=”element-value” name=”element-name” />

<input type=”reset” value=”element-value” name=”element-name” />

Let us see a code demonstrate it :

© Copyright Sourabh Bhandari http://sourabhandari.in

Let us see a code to demonstrate it :

© Copyright Sourabh Bhandari http://sourabhandari.in

© Copyright Sourabh Bhandari http://sourabhandari.in

You might also like