Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1of 10

E-commerce

Lecture 19
Slide 1-1
HTML Forms
Entering User Data from a
Web Page
HTML Forms
Forms are the primary method for
gathering data from site visitors
Create a form block with
<form></form>
Example:

<form name="myForm" method="post"


action=abc.php">
...
</form>
The "action" attribute
tells where the form data
3
HTML Forms - The Input
Element
The most important form element is the
<input> element.
The <input> element is used to select
user information.
An <input> element can vary in many
ways, depending on the type attribute.
An <input> element can be of type text
field, checkbox, password, radio button,
submit button, and more.

4
Form Fields
Single-line text input fields:
<input type="text" name="FirstName"
value="This is a text field" />
Multi-line textarea fields:

<textarea name="Comments">This is a multi-


line text field</textarea>

5
Form Fields
Single-line text input fields:
<form>
First name: <input type="text"
name="firstname"><br>
Last name: <input type="text"
name="lastname">
</form>

6
Form Fields
Single-line password input fields:
<form>
Password: <input type="password"
name="pwd">
</form>

7
Form Fields
Radio Buttons: Lets a user select ONLY
ONE of a limited number of choices:

<form>
<input type="radio" name=gender"
value="male">Male<br>
<input type="radio" name=gender"
value="female">Female
</form>

8
Form Fields
Checkboxes: Lets a user select ZERO or
MORE options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle"
value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle"
value="Car">I have a car
</form>

9
Form Fields
Submit Button: is used to send form data to
a server. The data is sent to the page
specified in the form's action attribute. The
file defined in the action attribute usually
does something with the received input:
<form name="input" action="demo_form_action.asp"
method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

10

You might also like