Scribd
Upload
49 views

HTML Form Tag

Forms are an important way for users to interact with websites. The basic HTML elements for forms include <form>, <input>, <label>, <textarea>, <select>, <option>, <fieldset>, <legend>, and <submit>. These elements allow you to collect different types of user input like text, radio buttons, checkboxes, dropdowns, and submit buttons. Attributes like name, id, value, and type are used to specify the purpose and functionality of each form element.

Uploaded by

atul
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
49 views

HTML Form Tag

Forms are an important way for users to interact with websites. The basic HTML elements for forms include <form>, <input>, <label>, <textarea>, <select>, <option>, <fieldset>, <legend>, and <submit>. These elements allow you to collect different types of user input like text, radio buttons, checkboxes, dropdowns, and submit buttons. Attributes like name, id, value, and type are used to specify the purpose and functionality of each form element.

Uploaded by

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

Basic HTML

Form Elements
No One Likes Forms
“I’m bored, so I think I will go No one enjoys making forms, or filling them
out, for that matter. However they remain
fill out some forms.” one of the main pieces of interactivity on the
– Said no one, ever web. Poorly designed forms can lead to very
frustrated users.
Starting a Form
Forms are one of the most important
ways users interact with content on the
web. We will look at the various important
form elements and discuss how they
work.

 A form must be surrounded by the


<form> element tags.

The form tag usually is accompanied with


these two attributes. The method
attribute tells the form how to send the
data from the form, the action says where
to send it. You could include other
attributes such as ID, class or name.
Adding a Text Field
The most common element found in a form is
the text field. This is created with an <input>
tag element.

Notice that it is self closing. The type attribute


is what makes it a text field.

To get data out of the form, you MUST include


a name attribute. This is how the data is going
to get to the server.

It is fairly common, but not required that an


ID attribute is added. This MUST be unique.
Optional: Add a Value Attribute
The value attribute can be added to put a
value in the field when the page is loaded.
Other attributes can be added as well, such as
class and tabindex.
Add a Label
To give the input tag a label, you use the label
tag. The for attribute in the label tag connects
the label to the input tag. The value in the for
attribute matches the value in the ID attribute
(not the name attribute).
Alternative Label Markup
It is also possible to do it this way. Notice no
for attribute is needed if you put the entire
input element inside the label element.
However, doing it this way somewhat limits
the styling options.
HTML5 Additional Form Input Types
● color
● date
● datetime-local
● email
● month
● number
● range
● search However, these are not supported evenly
● tel across all browsers.
● time
● url
● week
Radio Button Input Type
For radio buttons and checkboxes, it is Notice the name attribute for these two radio
considered better practice to put the label buttons match. That makes them a set.
after the input element. Checked makes this one checked by default.
Use Fieldset to Group Fields
The fieldset tag allows you to group the set of
radio buttons together semantically, and the
legend element allows you to give that set a
caption.
Using the Checkboxes Input Type
Checkboxes are slightly different
because the user can select one
or many for any group.

This means you have to process


checkbox data a little differently
from radio button data, where
only one value can be selected.

One common way to deal with it


is to send the data for
checkboxes to the server in an
array.
Select List Input Type
Select lists work like this. The select
element gets the name attribute.
We are still including an ID to work
with our label.

The option tag gets a value attribute


that will be passed to the processor
if that attribute is selected.
Using Textarea Elements
Textarea elements are different from input elements. First, they have an opening
and closing tags, rather than self closing like the input element.

Secondly, they need the cols and rows attribute, which is a bit unusual. This can be
overridden by setting a width and height in CSS, but these two attributes are
considered required.

Of course the ID is needed and name attributes so that the label works and the
data can be retrieved.
The Submit Input Type
The final piece we will look at now is the submit button. It uses the same <input>
element we use for text and other types of input. The name attribute can be
important because we may need it when we process the form.

The value is the the text that shows up inside the button. You can add class, id and
other attributes to the submit type as well.

If you want to use an image as a submit button, you will use <input type="image">
instead.
Form Styling
You can spend A LOT of time styling forms.
Even a simple form can take a while to get
right. Here are a few basic styles for this one.
HTML Form Validation
Some basic form validation has been making
its way into HTML. You can do some basic
front end validation this way, but not all
browsers support it to the same extent.

If you want to take full control of front end


form validation, that is where JavaScript
comes to the rescue.

You might also like