chapter-IV(forms)

4.
Forms
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.
Definition
Forms are required to take input from the user who visits the website. This form is used
basically for the registration process, logging into your profile on a website or to create
your profile on a website, etc … The information that is collected from the form is -1.
Name 2. Email Addresses etc. Now the form will take input from the form and post that
data in backend applications (like PHP). So the backend application will process the data
which is received by them. There are various form elements that we can use like text
fields, text area, drop-down list, select, checkboxes, radio, etc.
 The <input> tag specifies an input field where the user can enter data.
The <input> element is the most important form element.
 The <textarea> tag defines a multi-line text input control. The <textarea> element
is often used in a form, to collect user inputs like comments or reviews .
 The <button> tag defines a clickable button. Inside a <button> element you can put
text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.). That is not possible with
a button created with the <input> element.
 The <select> element is used to create a drop-down list. The <select> element is
most often used in a form, to collect user input.
 The <option> tag defines an option in a select list. <option> elements go inside
a <select>, <optgroup>, or <datalist> element.
 The <label> tag defines a label for several elements.
 The <output> tag is used to represent the result of a calculation (like one performed
by a script).
 The <button> tag is used to create a clickable button within HTML form on your
webpage. You can put content like text or image within the <button>.
Attributes:
 Accept-charset(character set) Specifies the character encodings that are to be used

for the form submission.
 Action (URL) specifies where to send the form-data when a form is submitted.
 Name (text) specifies the name of a form.
 Enctype Specifies how the form-data should be encoded when submitting it to the
server (only for method="post")
 Method specifies the HTTP method to use when sending form-data.
 The action is an attribute of <form> element that specifies the url of the second
web page. The second page receives the form-data from the first page after the
submission of a form.
E-mailed to someone in particular

We can create email form and can send email to particular email address using html
tags.
Examples:
<! DOCTYPE HTML>

<html>
<head>
<title> Demo Email </title>
</head
<body>
<form action="[email protected] "
method="POST"
enctype="multipart/form-data"
name="EmailForm">
Name:</br>
<input type="text" size="19" name="Contact-Name"><br><br>
Email:</br>
<input type="email" name="Contact-Email"><br><br>
Message:</br>
<textarea name="Contact-Message" rows="6″ cols="20″>
</textarea></br></br>
<button type="submit" value="Submit">Send</button>
</form>
</body>
</html>
Output:
Form tag
 The size attribute specifies the number of visible options in a drop-down list. If the
value of the size attribute is greater than 1, but lower than the total number of
options in the list, the browser will add a scroll bar to indicate that there are more
options to view.
Examples:
<! DOCTYPE html>

<html>
<head>
<title> Form Select Demo </title>
</head>
<body>
<p> Fruit Survey </p>
<form action= “ \formdemo.php”>
<label for = “fruits” >Choose a fruit:</label>
<select id = “fruits” name = “fruits” size="4">
<option value = “Mango” >Mango</option>
<option value = “Banana”>Banana</option>
<option value = “Orange” >Orange</option>
<option value = “Apple” >Apple</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
 The <textarea> tag defines a multi-line text input control. A text area can hold an
unlimited number of characters, and the text renders in a fixed-width font (usually
Courier). The size of a text area is specified by the <cols> and <rows> attributes.
The name attribute is needed to reference the form data after the form is submitted
(if you omit the name attribute, no data from the text area will be submitted).
The id attribute is needed to associate the text area with a label.
Examples:
<! DOCTYPE html>

<html>
<head>
<title> Textarea Demo </title>
</head>
<body>
<h1>The textarea element</h1>
<form action="/formdemo.php">
<label for="bengaltiger">about bengal tiger</label>
<textarea id="bengaltiger" name="bengaltiger" rows="10" cols="300">
The Bengal tiger is a tiger from a specific population
of the Panthera tigris tigris
subspecies that is native to the Indian subcontinent.
It is threatened by poaching,
loss, and fragmentation of
habitat, and was estimated at comprising fewer
than 2,500 wild individuals by 2011. None of
the Tiger Conservation Landscapes within its
range is considered large enough to support an effective
population of more than 250 adult individuals.
India's tiger population was estimated at 1,706–1,909
individuals in 2010. By 2018, the population
had increased to an estimated 2,603–3,346 individuals.
Around 300–500 tigers are estimated in Bangladesh,
220–274 tigers in Nepal and 103 tigers in Bhutan.
</textarea>
<br><br>
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "formdemo.php”. </p>
</body>
</html>
Output:
 The method attribute specifies how to send form-data (the form-data is sent to the
page specified in the action attribute). The form-data can be sent as URL variables
(with method="get") or as HTTP post transaction (with method="post").
The target attribute specifies where to open the linked document. Blank attribute
opens the linked document in a new window.
Examples:
<! DOCTYPE html>

<html>
<head>
<title> Method Demo </title>
</head>
<body>
<h1>The form method="post" attribute</h1>
<form action="/action_page.php"
method="post" target="_blank">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<br><br>
</form>
<p>Click on the submit button, and the form will be

submittied using the POST method. </p>
</body>
</html>
Output:
 The <input type="checkbox"> defines a checkbox. The checkbox is shown as a

square box that is ticked (checked) when activated. Checkboxes are used to let a
user select one or more options of a limited number of choices.
Examples:
<! DOCTYPE html>
<html>
<head>
<title> Checkbox Demo </title>
</head>
<body>
<h1>Choose your favourite fruit</h1>
<form action="/action_page.php">
<input type="checkbox" id="fruit1" name="fruit1" value="Banana">
<label for="fruit1"> Banana</label><br>
<input type="checkbox" id="fruit2" name="fruit2" value="Mango">
<label for="fruit2">Mango</label><br>
<input type="checkbox" id="fruit3" name="fruit3" value="Apple">
<label for="fruit3">Apple </label>
<br><br>
</form>
</body>
</html>
Output:
 Hidden attribute
The <input type="hidden"> defines a hidden input field. A hidden field let web
developers include data that cannot be seen or modified by users when a form is
submitted. A hidden field often stores what database record that needs to be updated
when the form is submitted.
Examples:
<! DOCTYPE html>

<html>
<head>
<title> Hidden Demo </title>
</head>
<body>
<form action="/hidden_page.php">
<label for="fname">CollegeName:</label>
<input type="text" id="cname" name="cname">
<br><br>
<input type="hidden" id="custId" name="custId" value="10080">
</form>
<p> The hidden field is not shown to the user,

but the data is sent when the form is submitted. </p>
</body>
</html>
Output:
 Image
The <input type="image"> defines an image as a submit button. The path to the
image is specified in the src attribute.
<! DOCTYPE html>

<html>
<body>
<form action="/image_page.php">
<label for="fname">First name: </label>
<input type="text" id="fname" name="fname">
<br><br>
<label for="lname">Last name: </label>
<input type="text" id="lname" name="lname">
<br><br>
<input type="image" src="Murti.png"
alt="Submit" width="40" height="40">
</form>
<p> The input type="image" sends the X and Y coordinates
of the click that activated the image button. </p>
</body>
</html>
Output:
 The <input type="radio"> defines a radio button. Radio buttons are normally
presented in radio groups (a collection of radio buttons describing a set of related
options). Only one radio button in a group can be selected at the same time. The
radio group must have share the same name (the value of the name attribute) to be
treated as a group. Once the radio group is created, selecting any radio button in
that group automatically deselects any other selected radio button in the same
group. You can have as many radio groups on a page as you want, as long as each
group has its own name.
<! DOCTYPE html>

<html>
<head>
<title> Checkbox Demo </title>
</head>
<body>
<form action="/checkboxdemo.php">
<p>Select your favourite Movie</p>
<input type="radio" id="pashupatiprasad"
name="fav_movie" value="Pashupatiprasad">
<label for="pashupatiprasad">Pashupatiprasad</label><br>
<input type="radio" id="prem geet"
name="fav_movie" value="Prem Geet">
<label for="prem geet">Prem Geet</label><br>
<input type="radio" id="chhakka panja"
name="fav_movie" value="Chhakka Panja">
<label for="chhakka panja">Chhakka Panja</label>
<br>
</body>
</html>
Output:
 The <input type="reset"> defines a reset button which resets all form values to its
initial values. Avoid reset buttons in your forms! It is frustrating for users if they
click them by mistake. The <input type="submit”> is used to submit the form.
Syntax:
<input type="reset" value="Reset Form">

 The <input> HTML element is used to create interactive controls for web-based
forms in order to accept data from the user; a wide variety of types of input data and
control widgets are available, depending on the device and user agent.
The <input> element is one of the most powerful and complex in all of HTML due
to the sheer number of combinations of input types and attributes.
Example:
<! DOCTYPE html>

<html>
<head>
<title> Input Demo </title>
</head>
<body>
<form action="/inputdemo.php">
<label for="name">Name (4 to 8 characters) :</label>
</br> </br>
<input type="text" id="name" name="name” required
minlength="4" maxlength="8" size="10" > </br> </br>
<input type="reset" value="Reset Form">
</body>
</html>
Output:
Q.N. Write HTML Code to create given form.
Solution:
<! DOCTYPE html>

<html>
<head>
<title>Question Demo </title>
</head>
<body>
<p> Individual-Login </p>
<form action= “ \formdemo.php”>
FirstName:
<input type="text" size="19" name="YourName">
Last Name :
<input type="text" size="19" name="Surname"><br></br>
Gender:
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label> </br></br>

Address: </br></br>
<label for = “state” >State:</label>
<select id = “state” name = “state” size="1">
<option value = “Province No. 3” >Province No. 3</option>
</select>
<label for = “district” >District:</label>
<select id = “district” name = “district” size="1">
<option value = “Kathmandu” >Kathmandu</option>
</select> </br> </br>

Street Name:
<input type="text" size="22" name="street name"> </br></br>
Interested Subject:
<input type="checkbox" id="sub1" name="sub1" value="C">
<label for="sub1"> C</label>
<input type="checkbox" id="sub2" name="sub2" value="C++">
<label for="sub2"> C++</label>
<input type="checkbox" id="sub3" name="sub3" value="WPT">

<label for="sub3">WPT</label>
<input type="checkbox" id="sub4" name="sub4" value="VP">
<label for="sub4"> VP</label></br></br>
<label for = “sports” >Favourite Sports:</label>
<select id = “sports” name = “sports” size="3">
<option value = “Cricket” >Cricket</option>
<option value = “Football”>Football</option>
<option value = “Volleyball” >VolleyBall</option>
</select> </br></br> </br>

Email ID:
<input type="email" name="Contact-Email"></br></br>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" minlength="8"><br><br>
Comment:
<textarea name="Contact-Message" rows="6″ cols="20″>
</textarea></br></br>
<input type="submit" value="SUBMIT">

<input type="reset" value="RESET">
</form>
</body>
</html>

chapter-IV(forms)

Uploaded by

Copyright:

Available Formats

chapter-IV(forms)

Uploaded by

Document Information

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

chapter-IV(forms)

Uploaded by

Copyright:

Available Formats

4.

 Accept-charset(character set) Specifies the character encodings that are to be used

E-mailed to someone in particular

<! DOCTYPE HTML>

<! DOCTYPE html>

<! DOCTYPE html>

<! DOCTYPE html>

<h1>The form method="post" attribute</h1>

<p>Click on the submit button, and the form will be

 The <input type="checkbox"> defines a checkbox. The checkbox is shown as a

<h1>Choose your favourite fruit</h1>

<! DOCTYPE html>

<p> The hidden field is not shown to the user,

<! DOCTYPE html>

<! DOCTYPE html>

<input type="reset" value="Reset Form">

<! DOCTYPE html>

<! DOCTYPE html>

<input type="radio" id="female" name="gender" value="female">

<label for="other">Other</label> </br></br>

</select> </br> </br>

<input type="checkbox" id="sub3" name="sub3" value="WPT">

</select> </br></br> </br>

<input type="submit" value="SUBMIT">

You might also like