PSDC-150

WEB development with

HTML & CSS
Working with HTML tags and attributes
Continued…
Form <form>
HTML borrows the concept of a form to refer to different
elements that allow you to collect information from visitors to
your site.

Whether you are adding a simple search box to your website or

you need to create more complicated insurance applications,
HTML forms give you a set of elements to collect data from your
users
Form controls
When using forms, we usually interact some of the below form
elements which we call form controls:
For adding text:
● Input field
● Password field
● Text area
For making choice:
● Radio
● Checkbox
● Dropdown
For submitting form:
● Submit buttons
● Image buttons
● File uploads
Form Structure
<form>
Form controls live inside a <form> element. This element should
always carry the action attribute and will usually have a method
and id attribute too.

action
Every <form> element requires an action attribute. Its value is
the URL for the page on the server that will receive the
information in the form when it is submitted.

method
Forms can be sent using one of two methods: get or post.
With the get method, the values from the form are added to the
end of the URL specified in the action attribute.
Input field
<input>
The <input> element is used to create several different form
controls. The value of the type attribute determines what kind
of input they will be creating.
type="text" size
When the type attribute has a value of text, it creates a singleline The size attribute should not be used on new
text input. forms. It was used in older forms to indicate the
name width of the text input (measured by the number
When users enter information into a form, the server needs to of characters that would be seen). For example, a
know which form control each piece of data was entered into. value of 3 would create a box wide enough to
(For example, in a login form, the server needs to know what has display three characters (although a user could
been entered as the username and what has been given as the enter more characters if they desired). In any new
password.) Therefore, each form control requires a name forms you write, CSS should be used to control the
attribute. width of form elements. The size attribute is only
The value of this attribute identifies the form control and is sent mentioned here because you may come across it
along with the information they enter to the server. when looking at older code.
Password Input <input>
type="password"
When the type attribute has a value of password it creates a text
box that acts just like a single-line text input, except the
characters are blocked out.
They are hidden in this way so that if someone is looking over
the user's shoulder, they cannot see sensitive data such as
passwords.

name
The name attribute indicates the name of the password input,
which is sent to the server with the password the user enters.

size, maxlength
It can also carry the size and maxlength attributes like the
single-line text input.
Text Area
<textarea>
The <textarea> element is used to create a mutli-line text input.
Unlike other input elements this is not an empty element. It
should therefore have an opening and a closing tag.

Any text that appears between the opening <textarea> and

closing </textarea> tags will appear in the text box when the
page loads.

If the user does not delete any text between these tags, this
message will get sent to the server along with whatever the user
has typed. (Some sites use JavaScript to clear this information
when the user clicks in the text area.)
Radio <input>
type="radio"
Radio buttons allow users to pick just one of a number of options.
name
The name attribute is sent to the server with the value of the option the
user selects. When a question provides users with options for answers in
the form of radio buttons, the value of the name attribute should be the
same for all of the radio buttons used to answer that question.
value
The value attribute indicates the value that is sent to the server for the
selected option.
The value of each of the buttons in a group should be different (so that
the server knows which option the user has selected).
checked
The checked attribute can be used to indicate which value (if any) should
be selected when the page loads. The value of this attribute is checked.
Only one radio button in a group should use this attribute.
Checkbox <input>
type="checkbox"
Checkboxes allow users to select (and unselect) one or more options in
answer to a question.
name
The name attribute is sent to the server with the value of the option(s)
the user selects. When a question provides users with options for answers
in the form of checkboxes, the value of the name attribute should be the
same for all of the buttons that answer that question.
value
The value attribute indicates the value sent to the server if this checkbox
is checked.
checked
The checked attribute indicates that this box should be checked when the
page loads. If used, its value should be checked.
Drop Down List Box
<select>
A drop down list box (also known as a select box) allows users to
select one option from a drop down list.
The <select> element is used to create a drop down list box. It
contains two or more <option> elements.
name
The name attribute indicates the name of the form control being
sent to the server, along with the value the user selected.
Drop Down List Box
<option>
The <option> element is used to specify the options that the
user can select from. The words between the opening <option>
and closing </option> tags will be shown to the user in the drop
down box.
value
The <option> element uses the value attribute to indicate the
value that is sent to the server along with the name of the
control if this option is selected.
selected
The selected attribute can be used to indicate the option that
should be selected when the page loads. The value of this
attribute should be selected. If this attribute is not used, the first
option will be shown when the page loads. If the user does not
select an option, then the first item will be sent to the server as
the value for this control.
Multi select <select>
size
You can turn a drop down select box into a box that shows more
than one option by adding the size attribute. Its value should be the
number of options you want to show at once. In the example you
can see that three of the four options are shown.
Unfortunately, the way that browsers have implemented this
attribute is not perfect, and it should be tested throroughly if used
(in particular in Firefox and Safari on a Mac).
multiple
You can allow users to select multiple options from this list by adding
the multiple attribute with a value of multiple.
File Input Box <input>
If you want to allow users to upload a file (for example an
image, video, mp3, or a PDF), you will need to use a file
input box.

type="file"
This type of input creates a box that looks like a text input
followed by a browse button.

When the user clicks on the browse button, a window opens

up that allows them to select a file from their computer to
be uploaded to the website.
Submit button
<input>
type="submit"
The submit button is used to
send a form to the server.
name
It can use a name attribute but it
does not need to have one.
value
The value attribute is used to control the text that appears on a
button. It is a good idea to specify the words you want to appear
on a button because the default value of buttons on some
browsers is ‘Submit query’ and this might not be appropriate for
all kinds of form
The End