HTML and CSS Reference
In-Depth Information
Lesson 10.
Building Forms
Forms are an essential part of the Internet, as they provide a way for websites to capture
information from users and to process requests, and they offer controls for nearly every ima-
ginable use of an application. Through controls or fields, forms can request a small amount
of information—often a search query or a username and password—or a large amount of
information—perhaps shipping and billing information or an entire job application.
We need to know how to build forms in order to acquire user input. In this lesson we'll dis-
cuss how to use HTML to mark up a form, which elements to use to capture different types
of data, and how to style forms with CSS. We won't get too deep into how information from
a form is processed and handled on the back end of a website. Form processing is a deeper
topic, outside the realm of this topic; for now we'll stick to the creation and styling of forms.
Initializing a Form
To add a form to a page, we'll use the
<form>
element. The
<form>
element identifies
where on the page control elements will appear. Additionally, the
<form>
element will
wrap all of the elements included within the form, much like a
<div>
element.
1.
<form action="/login" method="post">
2.
...
3.
</form>
A handful of different attributes can be applied to the
<form>
element, the most common
of which are
action
and
method
. The
action
attribute contains the URL to which in-
formation included within the form will be sent for processing by the server. The
method
attribute is the HTTP method browsers should use to submit the form data. Both of these
<form>
attributes pertain to submitting and processing data.
Text Fields & Textareas
When it comes to gathering text input from users, there are a few different elements avail-
able for obtaining data within forms. Specifically, text fields and textareas are used for col-
lecting text- or string-based data. This data may include passages of text content, passwords,
telephone numbers, and other information.
Search WWH ::
Custom Search