HTML Forms

• 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.
• 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.
 The form Element
• Forms are added to web pages using
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.
Attributes
• accept-charset - Space-separated character
encodings the server accepts. The default value
means the same encoding as the page.
• autocapitalize - A nonstandard attribute used by
iOS Safari that controls how textual form
elements should be automatically
capitalized. Possible values are :
– none: No automatic capitalization.
– sentences (default): Capitalize the first letter of each
sentence.
– words: Capitalize the first letter of each word.
– characters: Capitalize all characters — that is,
uppercase.
• autocomplete- Indicates whether input
elements can by default have their values
automatically completed by the
browser. Possible values:
– off: The browser may not automatically complete
entries.
– on: The browser may automatically complete
entries.
• name - The name of the form.
The name attribute is used as a reference
when the data is submitted.
• rel - specifies the relationship between the
current document and the linked document.
 Attributes for form submission
• action
– The action attribute defines the location (URL) where the
form's collected data should be sent when it is submitted.
• enctype
The enctype attribute specifies how the form-data should
be encoded when submitting it to the server. Possible
values:
– application/x-www-form-urlencoded: The default value. All
characters are encoded before sent (spaces are converted to
"+" symbols, and special characters are converted to ASCII
HEX values)
– multipart/form-data: Use this if the form contains <input>
elements with type=file.
– text/plain: Sends data without any encoding at all.
Introduced by HTML5 for debugging purposes.
• method
The HTTP method to submit the form with. Possible
(case insensitive) values:
– post: The POST method; form data sent as the
request body.
– get: The GET method; form data appended to the
action URL with a ? separator. Use this method when
the form has no side-effects.
• novalidate
This Boolean attribute indicates that the form shouldn't
be validated when submitted. If this attribute is not set
(and therefore the form is validated).
• target
Indicates where to display the response after submitting
the form. In HTML 4, this is the name/keyword for a
frame. In HTML5, it is a name/keyword for a browsing
context (for example, tab, window, or iframe). The
following keywords have special meanings:
▪ _self (default): Load into the same browsing context
as the current one.
▪ _blank: Load into a new unnamed browsing context.
▪ _parent: Load into the parent browsing context of the
current one. If no parent, behaves the same as _self.
▪ _top: Load into the top-level browsing context (i.e.,
the browsing context that is an ancestor of the current
one and has no parent). If no parent, behaves the
same as _self.
 <input> types

• How an <input> works varies considerably depending

on the value of its type attribute.

<input type="button">
• The <input type="button"> defines a clickable
button.
• To make buttons do anything, you have to
write JavaScript code to do the work.
• <input type="button" value="Click Me">
• If you don't specify a value, you get an empty
button.
<form>
<input type="button" value="Start machine">
</form>
<p>The machine is stopped.</p>
<script>
const button = document.querySelector('input');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
if (button.value === 'Start machine') {
button.value = 'Stop machine';
paragraph.textContent = 'The machine has started!';
} else {
button.value = 'Start machine';
paragraph.textContent = 'The machine is stopped.';
}
}
</script>
 <input type="password">
• <input> elements of type password provide a
way for the user to securely enter a password.
• The element is presented as a one-line plain
text editor control in which the text is
obscured so that it cannot be read, usually by
replacing each character with a symbol such as
the asterisk ("*") or a dot ("•").
<label for="userPassword">Password: </label>
<input id="userPassword" type="password">

<input type="submit">
• <input> elements of type submit are rendered
as buttons. When the click event occurs, the
user agent attempts to submit the form to the
server.
– <input type="submit" value="Send Request">
 <input type="email">
• <input> elements of type email are used to let the
user enter and edit an e-mail address, or, if the
multiple attribute is specified, a list of e-mail
addresses.
– <input id="emailAddress" type="email">

<input type="date">
• <input> elements of type="date" create input fields
that let the user enter a date, either with a textbox
that validates the input or a special date picker
interface.
<form action="https://example.com">
<label>
Enter your birthday:
<input type="date" name="bday">
</label>

<p><button>Submit</button></p>
</form>

This HTML submits the entered date under the key bday to
https://example.com — resulting in a URL like
https://example.com/?bday=1955-06-08

NOTE - Only form elements with a name attribute will have

their values passed when submitting a form.
 <input type="file">
• <input> elements with type="file" let the user
choose one or more files from their device
storage.
<form method="post" enctype="multipart/form-data">
<div>
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>
</div>
<div>
<button>Submit</button>
</div>
</form>
 The <label> Element
• The HTML <label> element represents a caption for an
item in a user interface.
• Associating a <label> with an <input> element offers
some major advantages:
– The label text is not only visually associated with its
corresponding text input; it is programmatically associated
with it too. This means that, for example, a screen reader
will read out the label when the user is focused on the
form input, making it easier for an assistive technology
user to understand what data should be entered.
– You can click the associated label to focus/activate the
input, as well as the input itself. This increased hit area
provides an advantage to anyone trying to activate the
input, including those using a touch-screen device.
• To associate the <label> with an <input> element, you
need to give the <input> an id attribute.
The <label> then needs a for attribute whose value is
the same as the input's id.
– <label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

• Alternatively, you can nest the <input> directly

inside the <label>, in which case the for and id
attributes are not needed because the association
is implicit:
• <label>Do you like peas?
<input type="checkbox" name="peas">
</label>