Scribd
Upload
115 views

Lesson 2 Forms

Here is the HTML code for a simple HTML form: <form> <label for="name">Name:</label> <input type="text" id="name"><br><br> <label for="email">Email:</label> <input type="email" id="email"><br><br> <input type="submit" value="Submit"> </form> This form contains two input fields (name and email) along with submit button to submit the form data.

Uploaded by

Jared Patani
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
115 views

Lesson 2 Forms

Here is the HTML code for a simple HTML form: <form> <label for="name">Name:</label> <input type="text" id="name"><br><br> <label for="email">Email:</label> <input type="email" id="email"><br><br> <input type="submit" value="Submit"> </form> This form contains two input fields (name and email) along with submit button to submit the form data.

Uploaded by

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

HTML FORMS

HTML FORM
❖ is a section of a document which contains
controls such as text fields, password fields,
checkboxes, radio buttons, submit button,
menus etc.
Sign Up Form/Registration Form
Payment Form
Feedback Form
HTML FORM
❖ HTML forms are required when you want to
collect some data from a site visitor.

❖ It acts as a communication bridge that allows a


user to communicate with a company or vice
versa.
How to create HTML forms?
HTML Form Structure
Syntax:
❖ The HTML <form> tag <form>
defines a form that is used
....
to collect user input.
Form Elements..
❖ All of the form elements ....
should be written inside </form>
the <form> and </form>
tags.
INPUT ELEMENT
❖ is used to create interactive controls for web-
based forms in order to accept data from the
user.
<!DOCTYPE html>
<html>
<head>
<title> HTML Form Input Attribute </title>
</head>
<body>
<form> Attributes are additional
First name: values that configure
<input type="text" name="firstname">
Last name:
the HTML elements.
<input type="text" name="lastname">
</form>
</body>
</html>
Attribute & Description
type Indicates the type of input control and for text input
control it will be set to text.
name Used to give a name to the control which is sent to
the server to be recognized and 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.
maxlength Allows to specify the maximum number of characters
a user can enter into the text box.
HTML Form Controls
❖ Text Input Controls
❖ Checkboxes Controls
❖ Radio Box Controls
❖ Select Box Controls
❖ Submit and Reset Button
Text Input Controls
❖ Single-line text input control
❖ Password input control
❖ Multiple-line text input control
Single-line text input control
❖ This control is used for items that require only one line
of user input. They are created using the <input> tag.
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" >
<br>
Last name: <input type = "text" name = "last_name" >
</form>
</body>
</html>
Password Input Control
❖ This is also a single-line text input but it masks
the character as soon as a user enters it.
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" >
<br>
Password: <input type = "password" name = "pword" >
</form>
</body>
</html>
Multiple-Line Text Input Control
❖ This is used when the user is required to give details
that may be longer than a single sentence.
Attribute & Description
type Used to give a name to the control which is sent to
the server to be recognized and get the value.
rows Indicates the number of rows of text area box.

cols Indicates the number of columns of text area box


<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br>
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>
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.
Attribute & Description

type Indicates the type of input control and for checkbox


input control it will be set to checkbox.

name Used to give a name to the control which is sent to


the server to be recognized and get the value.

value The value that will be used if the checkbox is


selected.

checked Set to checked if you want to select it by default.


<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "math" checked> Math
<input type = "checkbox" name = "physics"> Physics
</form>
</body>
</html>
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
Attribute & Description

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

name Used to give a name to the control which is sent to


the server to be recognized and get the value.

value The value that will be used if the radio button is


selected.

checked Set to checked if you want to select it by default.


<!DOCTYPE html>
<html>
<head>
<title>Radio Button</title>
</head>
<body>
<form>
<input type="radio" name = "gender" value="male"> Male
<input type="radio" name = "gender" value="female“ checked> Female
</form>
</body>
</html>
Select Box Control
❖ A select box, also called 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.
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head> The <select> element is used
<body> to create a drop-down list.
<form>
<select name = "dropdown">
<option value = "Math" selected>Math</option>
<option value = "Physics">Physics</option>
</select>
The <option> tags inside the <select> element
</form> define the available options in the drop-down list.
</body>
</html>
Following is the list of important attributes of <select> tag.

name Used to give a name to the control which is sent to


the server to be recognized and get the value.

size This can be used to present a scrolling list box.

multiple If set to "multiple" then allows a user to select multiple


items from the menu.
Following is the list of important attributes of <option> tag.

value The value that will be used if an option in the select


box is selected.

selected Specifies that this option should be the initially selected


value when the page loads.
Button Controls
❖ There are various ways in HTML to create clickable
buttons. You can also create a clickable button using
<input>tag by setting its type attribute to button. The type
attribute can take the following values.
type & Description
submit This creates a button that automatically submits a form.

reset This creates a button that automatically resets form


controls to their initial values.

button This creates a button that is used to trigger a client-side


script when the user clicks that button.
image This creates a clickable button but we can use an image
as background of the button.
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<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" src="submit_button.jpg" width="150 px"
height="50px">
</form>
</body>
</html>
Directions: Create the HTML Code for the following. Write them in your
answer sheet.

Output: Code :
Directions: Create the HTML Code for the following. Write them in your
answer sheet.
Output: Code :
Directions: Create the HTML Code for the following. Write them in your
answer sheet.

Output: Code :
Design a simple
HTML form.

You might also like