HTML Forms

nisa1207@gmail.com
Prog_nisa@quest.edu.pk

HTML Marquees
How forms work
The form element
POST versus GET
Variables and values
Form controls
Form accessibility features
2

An HTML marquee is a scrolling piece of text displayed
either horizontally across or vertically down your webpage
depending on the settings. This is created by using HTML
<marquees> tag.
3

Syntax
A simple syntax to use HTML <marquee> tag is as follows:
<marquee attribute_name="attribute_value"....more attributes>
One or more lines or text message or image
</marquee>
4

Attribute Description
width This specifies the width of the marquee. This can be a value
like 10 or 20% etc.
height This specifies the height of the marquee. This can be a value
like 10 or 20% etc.
direction This specifies the direction in which marquee should scroll.
This can be a value like up, down, left or right.
behavior This specifies the type of scrolling of the marquee. This can
have a value like scroll, slide and alternate.
scrolldelay This specifies how long to delay between each jump. This will
have a value like 10 etc.
5

scrollamount This specifies the speed of marquee text. This can have a
value like 10 etc.
loop This specifies how many times to loop. The default value is
INFINITE, which means that the marquee loops endlessly.
bgcolor This specifies background color in terms of color name or
color hex value.
hspace This specifies horizontal space around the marquee. This
can be a value like 10 or 20% etc.
vspace This specifies vertical space around the marquee. This can
be a value like 10 or 20% etc.
6

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>
7

There are two parts to a working form. The first part is the
form that you see on the page itself that is created using
HTML markup. Forms are made up of buttons, input fields,
and drop-down menus (collectively known as form controls)
used to collect information from the user. Forms may also
contain text and other elements.
9

The other component of a web form is an application or
script on the server that processes the information collected
by the form and returns an appropriate response. It’s what
makes the form work. In other words, posting an HTML
document with form elements isn’t enough. Web
applications and scripts require programming.
10

<form>...</form> :Interactive form
Forms are added to web pages using (no surprise
here) the form element. The form element is a
container for all the content of the form, including
some number of form controls, such as text entry
fields and buttons. It may also contain block
elements (h1, p, and lists, for example). However, it
may not contain another form element.
14

HTML Forms are used to select different kinds of user input.
HTML forms are used to pass data to a server.
An HTML form can contain input elements like text fields,
checkboxes, radio-buttons, submit buttons and more.
A form can also contain select lists, textarea, fieldset, legend,
and label elements.
 The <form> tag is used to create an HTML form:
<form>
.
input elements
.
</form> 15

The HTML <form> tag is used to create an HTML form and it
has following syntax:
<form action="Script URL" method="GET|POST">
form elements like input, textarea etc.
</form>
16

action Backend script ready to process your passed data.
method Method to be used to upload data. The most frequently used are GET
and POST methods.
target Specify the target window or frame where the result of the script will be
displayed. It takes values like _blank, _self, _parent etc.
enctype You can use the enctype attribute to specify how the browser encodes the
data before it sends it to the server. Possible values are:
•application/x-www-form-urlencoded - This is the standard method most
forms use in simple scenarios.
•mutlipart/form-data - This is used when you want to upload binary data
in the form of files like image, word file etc.
17

18
Text Input Controls
Checkboxes Controls
Radio Box Controls
Select Box Controls
File Select boxes
Hidden Controls
Clickable Buttons
Submit and Reset Button

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.
19

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. 20

defines a one-line input field that a user can enter text into:
 <form>
First name: <input type="text" name="firstname"> <br />
Last name: <input type="text" name="lastname">
</form>
22

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. 23

Defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
Note: The characters in a password field are masked (shown
as asterisks or circles).
24

type Indicates the type of input control and for password input
control it will be set to password.
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.
25

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 can be specified by the cols and rows
attributes.
26

28
<textarea cols="20" rows="5"> </textarea>

<input type="radio"> defines a radio button. Radio buttons let a user
select ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="choice" value="yes“ checked="checked“>
Yes <br />
<input type="radio" name="choice" value="no">No </form>
Checked attributed defines that control is preselected when page load.
29

type Indicates the type of input control and for checkbox input
control it will be set to radio.
value The value that will be used if the radio box is selected.
checked Set to checked if you want to select it by default.
31

defines a checkbox. Checkboxes let 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>
32

type Indicates the type of input control and for checkbox input
control it will be set to checkbox.
value The value that will be used if the checkbox is selected.
checked Set to checked if you want to select it by default.
34

The <select> element is used to create a drop-down
list.
The <option> tags inside the <select> element define
the available options in the list.
Tip: The <select> element is a form control and can be
used in a form to collect user input.
35

<select>
<option> Web Engineering</option>
<option> Computer Programming</option>
<option> Fundamentals of Algorithms</option>
<option> Analysis of Algorithms</option>
</select>
36

<select multiple>
<option> Web Engineering</option>
<option> Computer Programming</option>
<option> Fundamentals of Algorithms</option>
<option> Analysis of Algorithms</option>
</select>
39

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.
40
Following is the list of important attributes of <select> tag:

41
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.
label An alternative way of labeling options

If you want to allow a user to upload a file to your web site,
you will need to use a file upload box, also known as a file
select box. This is also created using the <input> element
but type attribute is set to file.
42
accept Specifies the types of files that the server accepts.

<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
43

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:
44
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.

defines a submit button. A 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=“applicationData" action="html_form_action.php"
method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
45

Button used to clear all the field of form in which reset button
defined.
<form name=" applicationData" action="html_form_action.php"
<input type="reset" value="Clear">
</form>
47

defines a button
<form>
<input type="button" value="clickMe" />
</form>
48

<input type="image" name="Imagebutton" src="logo.png" />
49

The <button> tag defines a clickable button.
 Inside a <button> element you can put content, like text or
images. This is the difference between this element and
buttons created with the <input> element.
Tip: Always specify the type attribute for a <button> element.
Different browsers use different default types for the <button>
element.
<button>Click Me</button>
50

Hidden form controls are used to hide data inside the page
which later on can be pushed to the server. This control
hides inside the code and does not appear on the actual
page. For example, following hidden form is being used to
keep current page number. When a user will click next page
then the value of hidden control will be sent to the web
server and there it will decide which page has be displayed
next based on the passed current page.
51

<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
52

 http://www.tutorialspoint.com/html/html_forms.htm
 http://www.tutorialspoint.com/html/html_marquees.htm
53

HTML Forms

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à HTML Forms

Similaire à HTML Forms (20)

Plus de Nisa Soomro

Plus de Nisa Soomro (17)

Dernier

Dernier (20)

HTML Forms