Module 11: HTML Forms

Alexander S. Cochanco, MSIT

HTML Form
• The HTML <form> and </form> tags define a form
that is used to collect user input.
• An HTML form contains form elements.
• Form elements are different types of input
elements, like text fields, checkboxes, radio
buttons, submit buttons and more.
The <input> element
• The <input> element is the most important form
element.
• The <input> element can be displayed in several
ways, depending on the type attribute.
Input types text and password
• <input type=“text”> defines a one-line text input
field.
• <input type=“password”> defines a password field.
The characters in a password field are masked
(shown as asterisks or circles)
Activity 43
Input types submit, reset and button
• <input type=“submit”> defines a button for
submitting form data to a form-handler.
• <input type=“reset”> defines a reset button that
will reset all form values to their default values.
• <input type=“button”> defines a programmable
button.
Activity 43
Input types radio and checkbox
• <input type=“radio”> defines a radio button. A
radio button lets a user select only one of a limited
number of choices.
• <input type=“checkbox”> defines a checkbox.
Checkboxes lets users select zero or more options
of a limited number of choices.
Activity 44
Input types email, number and date
• <input type=“email”> is used for input fields that
should contain an email address.
• <input type=“number”> defines a numeric input
field.
• <input type=“date”> is used for input fields that
should contain a date.
Activity 45
Input types url, time and file
• <input type=“url”> is used for input fields that
should contain a URL address.
• <input type=“time”> allows the user to select a
time.
• <input type=“file”> allows the user to choose a file
from their device or computer’s storage.
Activity 46
HTML Input Attributes
• The value attribute specifies the initial value for an
input field.
• The readonly attribute specifies that the input field
is read only (cannot be changed)
• The disabled attribute specifies that the input field
is disabled. A disabled input field is unusable and
un-clickable, and its value will not be sent when
submitting the form.
Activity 47
HTML Input Attributes
• The size attribute specifies the size (in characters)
for the input field.
• The maxlength attribute specifies the maximum
allowed length for the input field. With a
maxlength attribute, the input field will not accept
more than the allowed number of characters.
Activity 48
HTML Input Attributes
• The min and max attributes specify the minimum
and maximum values for an <input> element.
• The step attribute specifies the legal number of
intervals for an <input> element.
Activity 49
HTML Input Attributes
• The placeholder attribute specifies a hint that
describes the expected value of an input field. The
hint is displayed in the field before the user enters
a value.
• The required attribute specifies that an input field
must be filled out before submitting the form.
Activity 50
HTML Input Attributes
• The pattern attribute specifies a regular expression
that the input element’s value is checked against.
• Use [A-Z] if field will only accept upper case letters
• Use [a-z] if field will only accept lower case letters
• Use [A-Za-z] if field will only accept letters
• Use [0-9] if field will only accept numbers
• The title attribute is used to describe the pattern
to the user.
Activity 51
HTML Input Attributes
• Use [A-Z] if field will only accept upper case letters
• Use [a-z] if field will only accept lower case letters
• Use [A-Za-z] if field will only accept letters
• Use [0-9] if field will only accept numbers
The select element
• The <select> and </select> element define a drop-
down list.
• The <option> and </option> elements define an
option that can be selected.
Activity 52
Laboratory
Exercise 17
Creating Input Forms
Instructions
• Create a new file named laboratory17.html
• The title should be “Laboratory 17”
• Create a link to w3.css
• Create a form
• Create a <div> inside the form, place the classes
w3-display middle, w3-card-4 and w3-half
• Create 2 <div> tags inside the first <div>
Instructions
• Put the classes w3-container and w3-blue inside
the first <div>
• Put a <h3> heading inside the first <div> with the
text Signup Form
• Put the classes w3-container and w3-padding
inside the second <div>
• Put the following elements in the second <div>:
Instructions
• A First name label followed by a text field, the
name shall be fname
• A Middle name label followed by a text field, the
name shall be mname
• A Last name label followed by a text field, the
name shall be lname
• A Username label followed by a text field, the
name shall be username
Instructions
• A Password label followed by a password field, the
name shall be password
• An Email Address label followed by an email field,
the name shall be email
• A Birthday label followed by a date field, the name
shall be birthday
• All fields shall use the class w3-input
Instructions
• A Sex label followed by two radio buttons, the
names of the fields shall be sex, one has a value
for male, and another has a value for female, use
the class w3-radio for both buttons
• All stated fields above except middle name and
email address shall be set to required
• Create a Civil Status label followed by a drop-down
list box, the list box shall have the following
options: Single, Married, Widowed, Separated. Use
the class w3-select
Instructions
• Create a submit button with the name submit and
value set to Sign up. Use the classes w3-half, w3-
button, w3-round and w3-green.
• Create a reset button with the name reset and
value set to Clear. Use the classes w3-half, w3-
button, w3-round and w3-red.