Web Technologies

HTML Forms
 Today’s Lecture
• HTML Forms
– Elements
• Input Elements
– Attributes
 HTML Forms
• <form> is required when we want to collect data from user.
– Example: during course registration we would like to collect
information such as student name, registration, course name etc.
– <form> is a container for different types of input elements, such as
text fields, checkboxes, radio buttons, submit and reset buttons
etc.
<form>
.
.
form elements
.
.
</form>
 HTML Forms
• HTML5 has introduced new elements, input elements, attributes, and
some other features.
– New elements are <article>, <aside>, <audio>, <video>, <figure>,
<header>, <footer> etc.
– New input elements are search, email, url, tel, number, range,
color, datetime (date, week, month, time, and datetime-local) etc.
– New attributes are required, placeholder, pattern, disabled,
readonly, multiple, autocomplete, autofocus etc.
 Elements and Input Elements
• HTML <form> elements can contain one or more of the following
form elements:
– <label>
– <input> (examples are text, password, radio, checkbox, file,
submit, reset, button, search, email, url, tel, number, range,
color, datetime (date, month, week, time, and datetime-local)
etc.)
– <select>
– <textarea>
– <fieldset>
– <legend>
– <datalist>
 Elements and Input Elements
• <label>
– It defines a label for form elements.
– It’s helpful for the screen-reader users, because it helps to
understand about the specific input element.
– It provides support to multiple elements.
• Examples are text, email, number, range, textarea, checkbox,
color etc.
<label for="firstname"><b>Enter First Name:</b></label>
<input type="text" placeholder="enter first name" required>
 Elements and Input Elements
• <input>
– It’s the most used element in form.
– It can be displayed in many ways, depending on the input type.
• Examples are text, password, radio, checkbox, file, submit,
reset, button, search, email, url, tel, number, range, color,
datetime (date, month, week, time, and datetime-local) etc.
– <input type="text">
• It defines a single-line text input field.
– <input type="password">
• It defines a password field.
• By default, password characters are masked (circle).
– <input type="email">
• It defines an email input field.
• To enter multiple emails from user, use "multiple" attribute
(separated by commas).
 Elements and Input Elements
• <input>
– <input type="radio">
• It defines a radio button.
• To define a pre-selected option, use “checked” attribute.
– <input type="checkbox">
• It defines a checkbox.
• It’s shown as a square box that is ticked when selected.
• It’s used to select one or more options.
• To define a pre-selected option, use “checked” attribute.
– <input type="number">
• It provides an input for entering a number.
• We can set the min, max, and step attributes.
 Elements and Input Elements
• <input>
– <input type="file">
• It defines a file-select field and a browse button for file
uploads.
• To allow users for uploading multiple files, use "multiple"
attribute.
– <input type="submit">
• It defines a button for submitting form data.
– <input type="reset">
• It defines a reset button that reset all form values to their
default values.
– <input type="button">
• It defines a clickable button (mostly used with JavaScript to
activate a script).
 Elements and Input Elements
<form>
<label for="text">Enter Your Name:</label>
<input type="text" placeholder="enter your first and last name as 'Hasnain Iqbal'" required size="36">
<br><br>
<label for="email">Enter Your Email Addresses:</label>
<input type="email" placeholder="enter your official and personal email addresses" size="37" required
multiple>
<br><br>
<label for="password">Enter Your Password:</label>
<input type="password" minlength="8" maxlength="16" placeholder="password min length 8, max length 16"
size="28" required>
<br><br>
<label for="checkbox">Select Your Courses:</label>
<input type="checkbox" id="336" name="336">
<label for="336">Web</label>
<input type="checkbox" id="301" name="301">
<label for="301">HUI</label>
<input type="checkbox" id="302" name="302">
<label for="302">French</label>
<br><br>
<label for="program">Choose Your Program:</label>
<input type="radio" id="bsse" name="program" checked>
<label for="bsse">BSSE</label>
<input type="radio" id="bscs" name="program">
<label for="bscs">BSCS</label>
<br><br>
<label for="file">Attach Your CV and Experience Certificate:</label>
<input type="file" required multiple>
<br><br>
<input type="submit" id="Submit" value="Submit Form">
<input type="reset" id="Reset" value="Cancel Form">
<br><br>
<input type="button" onclick="alert('Welcome SE Students')" value="Register">
</form>
Elements and Input Elements
 Elements and Input Elements
• <input>
– <input type="search">
• It provides a search field.
• This type of field is set by using the value search.
• Main difference between a text field and a search field is
how the browser styles its appearance, and sometimes
display an "Ⓧ", which clears the field of any value when
clicked.
 Elements and Input Elements
• <input>
– <input type="email">
• It’s used for entering email addresses.
• To enter multiple emails from user, use "multiple" attribute
(separated by commas).
<h3>allows only one email address</h3>
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit Email Address">
</form>
<br><hr><br>
<h3>allows multiple email addresses (separate each email address with comma)</h3>
<form>
<label for="emails">Enter email addresses:</label>
<input type="email" id="emails" name="emails" multiple>
<input type="submit" value="Submit Email Address">
</form>
 Elements and Input Elements
• <input>
– <input type="tel">
• It’s used for filling in phone numbers.
• Most devices displays a numeric keypad when type="tel" is
encountered.
<form>
<label for="phone">Enter Your Cell Number:</label>
<input type="tel" id="phone" name="phone" placeholder="1234-1234567"
pattern="[0-9]{4}-[0-9]{7}" required><br><br>
<br>
<input type="submit" value="Submit Number">
</form>
 Elements and Input Elements
• <input>
– <input type="range">
• It displays a slider control in browsers that support it.
• As with the number type, it allows the min, max, and step
attributes.
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50" step="10">
<input type="submit" value="Submit Volume">
</form>
 Elements and Input Elements
• <input>
– <input type="color">
• It provides the color controller.
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor"><br><br>
<input type="submit" value="Choose Color">
</form>
 Elements and Input Elements
• <input>
– Date and Time
• Date and Time displays the date, time, or both.
• There are several new date and time input types.
– <input type="date">
» It selects date, month and year. (example: 11-08-
2023)
– <input type="week">
» It selects week and year. (example: W01-2023)
– <input type="month">
» It selects month and year. (example: 08-2023)
– <input type="time">
» It selects time in hours and minutes). (example:
15:00)
 Elements and Input Elements
• <select>
– It defines a drop-down list.
– <option> elements defines an option that can be selected.
– Use “size” attribute to specify the number of visible values.
• <select id=“cars” name=“cars” size=“2”>
– To define a pre-selected option, use “selected” attribute.
• <option value=“mb” selected>MB</option>
<form>
<label for="cars">Choose Car Brand:</label>
<select id="cars" name="cars">
<option value="tesla">Tesla</option>
<option value="ford">Ford</option>
<option value="mb">MB</option>
<option value="bmw">BMW</option>
</select>
<input type="submit" value="Submit Car Brand">
</form>
 Elements and Input Elements
• <textarea>
– It defines a multi-line input text area.
– Size of text area is specified with rows and cols attributes.
<form>
<p><label for="sugg">Please submit your suggestions:</label></p>
<textarea id="sugg" name="sugg" rows="5" cols="50"></textarea>
<br><br>
<input type="submit" value="Submit Your Suggestions">
</form>
 Elements and Input Elements
• <fieldset>
– It’s used to group related data in a form.
• <legend>
– It defines a caption for <fieldset> element.
<form>
<fieldset>
<legend>Personal Data:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit Your Data">
<input type="reset" value="Reset Your Data">
</fieldset>
</form>
Elements and Input Elements
 Elements and Input Elements
• <datalist>
– It specifies a list of pre-defined options.
– User will see a drop-down list of pre-defined options as they
input data.
<form>
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Submit Your Answer">
</form>
 Attributes
• For years, developers have written JavaScript to validate the
information users entered form fields; what elements are required,
what type of data is accepted, and so on.
• HTML5 provides several attributes that allow to dictate what is an
acceptable value, without the use of any JavaScript.
– Examples are required, placeholder, pattern, disabled, readonly,
multiple, autocomplete, autofocus etc.
 Attributes
• required
– It specifies an input field must be filled before submitting form.
– It works with the following input types: text, search, url, tel,
email, password, date, number, checkbox, radio, file etc.
– It also works on the <select> and <textarea> elements.

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br><br>
<input type="submit" value="Submit Username">
</form>
 Attributes
• pattern
– It specifies the input field's value must be followed as per given
pattern.
– It works with the following input types: text, date, search, url,
tel, email, password etc.
<form>
<label for="phone">Enter Your Cell Number:</label>
<input type="tel" id="phone" name="phone" placeholder="1234-1234567"
pattern="[0-9]{4}-[0-9]{7}" required><br><br>
<br>
<input type="submit" value="Submit Number">
</form>
 Attributes
• placeholder
– It specifies a short hint that displayed in the input field before
the user enters a value.
– It works with the following input types: text, search, url, tel,
email, password etc.
<form>
<label for="phone">Enter Your Cell Number:</label>
<input type="tel" id="phone" name="phone" placeholder="1234-1234567"
pattern="[0-9]{4}-[0-9]{7}" required><br><br>
<br>
<input type="submit" value="Submit Number">
</form>
 Attributes
• readonly
– It specifies that an input field is readonly.
– A readonly input field cannot be modified.
<form>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="country">Country:</label>
<input type="text" id="country" name="country" value="Canada" readonly>
<br><br>
<input type="submit" value="Submit Form">
</form>
 Attributes
• multiple
– It allows user to enter more than one value.
– It works with the email and file input types.
– For <input type="file">: to select multiple files, hold down the
CTRL key while selecting.
– For <input type="email">: separate each email with a comma,
like: [email protected], [email protected] in the email field.
<form>
<label for="files">Upload Files:</label>
<input type="file" id="files" name="files" multiple>
<br><br>
<input type="submit" value="Submit Files">
</form>
 Attributes
• autocomplete
– It specifies whether an input field should have autocompleted
enabled.
– When a user starts to type in a field, the browser display options
to fill in the field, based on earlier typed values.
– It works with the following <input> types: text, search, url, tel,
email, password, datepickers, range, and color.
<form autocomplete="on">
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="enter your email address">
<br><br>
<input type="submit">
</form>
 Attributes
• autofocus
– It specifies an <input> element should automatically get focus
when the page loads.
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Enter email:</label>
<input type="email" name="email" id="email" autofocus>
<br><br>
<input type="submit" value="Register Now">
</form>
 Summary of Today’s Lecture
• HTML Forms
– Elements
• Input Elements
– Attributes
 References
• https://www.w3schools.com/html/html_form_elements.asp
• https://www.w3schools.com/html/html_form_input_types.asp
• https://www.w3schools.com/html/html_form_attributes.asp