HTML Form

15–19 MINS READ

Learning Objectives

1. Describe the importance of HTML forms in a web page.
2. Construct a web page using <form> and </form> elements that integrates with backend services for data processing.
3. Develop an HTML form that incorporates multiple input types, each chosen to optimize data entry for specific user tasks.
4. Create an HTML form that uses a wide range of input attributes to provide advanced features.
5. Create and customize dropdown menus using the select and option elements to enhance user interactivity on web forms.
6. Implement and configure the textarea element and its attributes to enable multi-line text input in web forms.
7. Group and label related form controls using the fieldset and legend elements to improve form accessibility and organization.
8. Create and style various types of buttons using the button element, and understand their functions in form submission and user interaction.

What is HTML Form?

HTML forms are a fundamental part of web development, enabling user interaction with web pages. They are used to collect user input and send it to a server for processing. Forms are essential for various web applications, such as login pages, registration forms, search boxes, and online surveys. The feedback of the user is mostly submitted to a server for review. Form processing is often called client/server processing because it requires both a client (a browser) and a remote server.

HTML Form Example

HTML Form Element

• The HTML <form> and </form> tag pairs define a form that can be used to collect user input.
• An HTML form contains different form elements.
• Form elements are different types of input elements like text fields, checkboxes, radio buttons, submit buttons and more.

HTML Form attributes

• The action attribute defines the action to be performed when the form is submitted.
• The method attribute specifies the HTTP method to be used when submitting the form data.
• The form-data can be sent as URL variables (with method="get") or as HTTP POST transaction (with method="post").

HTML Form Elements

The HTML <form></form> element can contain one or more of the following form elements.

• <input>
• <label></label>
• <select></select>
• <option></option>
• <textarea></textarea>
• <button></button>
• <fieldset></fieldset>
• <legend></legend>
• <datalist></datalist>
• <output></output>

The label Element

• The <label></label> element defines a label for several form elements.
• The <label></label> element is useful for screenreader users.
• The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

<form>
  <label for="sname">Student Name</label>
  <input type="text" id="sname" name="sname">
</form>

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.
• The type attribute specifies the type of input element to display.
• The name attribute is use to reference elements in a JavaScript, or to reference for data after a form is submitted.

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).

<form>
  <label for="sname">Student Name</label> <br />
  <input type="text" id="sname" name="sname">
  <label for="pword">Password</label> <br />
  <input type="password" id="pword" name="pword">
</form>

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.

<form>
  <label for="sname">Student Name</label> <br />
  <input type="text" id="sname" name="sname">
  <label for="pword">Password</label> <br />
  <input type="password" id="pword" name="pword"> <br /><br />
  <input type="submit" name="btnsubmit" value="Save">
  <input type="reset" name="btnclear" value="Clear">
  <input type="button" name="btnprint" value="Print">
</form>

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.

<form>
  <label for="sex">Sex:</label> <br />
  <input type="radio" id="sex" name="sex" value="male"> Male <br />
  <input type="radio" id="sex" name="sex" value="female"> Female <br />
  <label for="subjects">Subjects Enrolled:</label> <br />
  <input type="checkbox" id="subjects" name="subj1" value="CC-103">CC-103 <br />
  <input type="checkbox" id="subjects" name="subj2" value="IT-WST02">IT-WST02 <br />
  <input type="checkbox" id="subjects" name="subj3" value="IT-PF01">IT-PF01 <br />
  <input type="checkbox" id="subjects" name="subj4" value="IT-MS01">IT-MS01 <br />
</form>

Input types email, number and date

• <input type="email"> is used for input fields that should contain an email address.
• <input type="date"> is used for input fields that should contain a date.
• <input type="number"> defines a numeric input field.

<form>
  <label for="eadd">Email Address:</label> <br />
  <input type="email" id="eadd" name="eadd"> <br />
  <label for="bday">Birthday:</label> <br />
  <input type="date" id="bday" name="bday"> <br />
  <label for="age">Age:</label> <br />
  <input type="number" id="age" name="age"> <br />
  <input type="submit" name="btnsubmit" value="Save">
  <input type="reset" name="btnclear" value="Clear">
</form>

Input types range and tel

• <input type="range"> defines a control for entering a number whose exact value is not important (slider control). Default range is 0 to 100.
• <input type="tel"> is used for input fields that should contain a telephone number.

<form>
  <label for="price">Price range:</label> <br />
  <input type="range" id="price" name="price"> <br />
  <label for="cnum">Cellphone Number:</label> <br />
  <input 
    type="tel" 
    id="cnum" 
    name="cnum" 
    pattern="[0-9]{4}-[0-9]{3}-[0-9]{4}" 
    placeholder="0910-123-4567"
  > <br />
  <input type="submit" name="btnsubmit" value="Submit">
</form>

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.

Adding the multiple attribute to <input type="file"> allows users to select more than one file from their device or computer's storage.

Example: <input type="file" multiple>

<form>
  <label for="weadd">Website Address:</label> <br />
  <input type="url" id="weadd" name="weadd"> <br />
  <label for="tarrive">Arrival Time:</label> <br />
  <input type="time" id="tarrive" name="tarrive"> <br />
  <label for="sfile">File Upload:</label> <br />
  <input type="file" id="sfile" name="sfile"> <br />
  <input type="submit" name="btnsubmit" value="Submit">
  <input type="submit" name="btnsubmit" value="Save">
  <input type="reset" name="btnclear" value="Clear">
</form>

Input Attributes

The value, readonly and disabled

• 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 unclickable, and its value will not be sent when submitting a form.

<form>
  <label for="subject">Subject:</label> <br />
  <input type="text" id="subject" name="subject" value="IT-WST01" disabled> <br />
  <label for="section">Section:</label> <br />
  <input type="text" id="section" name="section" value="BSIT 2" disabled> <br />
  <input type="submit" name="btnsubmit" value="Save">
  <input type="reset" name="btnclear" value="Clear">
</form>

The size and maxlength

• 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.

<form>
  <label for="fname">First Name:</label>
  <input type="text" id="fname" name="fname"> <br />
  <label for="lname">Last Name:</label>
  <input type="text" id="lname" name="lname" size="30"> <br />
  <label for="preadd">Present Address:</label> <br />
  <input type="text" id="preadd" name="preadd" size="40" maxlength="30"> <br />
  <input type="submit" name="btnsubmit" value="Save">
  <input type="reset" name="btnclear" value="Clear">
</form>

The min, max and step

• 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.

<form>
  <label for="quiz">Quiz Score:</label> <br />
  <input type="number" id="quiz" name="quiz" min="0" max="50" step="5"> <br />
  <input type="submit" name="btnsubmit" value="Save">
  <input type="reset" name="btnclear" value="Clear">
</form>

The placeholder, required and autofocus

• The placeholder attribute specifies a hint describing an input field’s expected value. 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.
• The autofocus attribute specifies that an input field should automatically get focus when the page loads.

<form>
  <input type="text" name="uname" placeholder="Enter username" required autofocus> <br />
  <input type="password" name="pword" placeholder="Enter password" required> <br />
  <input type="submit" name="btnsubmit" value="Submit">
</form>

The pattern and title

• The pattern attribute specifies a regular expression that the input element’s value is checked against.
• The title attribute is used to describe the pattern to the user.

<form>
  <label for="zipcode">ZIP Code:</label> <br />
  <input type="text" id="zipcode" name="zipcode" pattern="[0-9]{4}" title="4 digit zipcode">
  <br />
  <input type="submit" name="btnsubmit" value="Submit">
</form>

The select and option elements

• The <select></select> element defines a drop-down list.
• The <option></option> element defines an option that can be selected.
• Use the selected attribute to the <option> element to define a pre-selected option.

<form>
  <label for="civilstat">Civil Status:</label>
  <select id="civilstat" name="civilstat">
    <option value="single" selected>Single</option>
    <option value="married">Married</option>
    <option value="separated">Separated</option>
    <option value="widowed">Widowed</option>
  </select>
</form>

The datalist element

• The <datalist></datalist> tag specifies a list of pre-defined options for an <input> element.
• The <datalist></datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.
• The <datalist> element‘s id attribute must be equal to the <input> element‘s list attribute (this binds them together).

<form>
  <label>Web Browsers:</label>
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="edge">Edge</option>
    <option value="internet explorer">Internet Explorer</option>
    <option value="chrome">Chrome</option>
  </datalist><br />
</form>

The textarea element

• The <textarea> and </textarea> element defines a multi-line input field.
• This element is often used in a form, to collect user inputs like comments or reviews.
• The rows attribute specifies the visible number of lines in a text area.
• The cols attribute specifies the visible width of a text area.

<form>
  <label for="msg">Message:</label> <br />
  <textarea name="msg" id="msg" rows="10" cols="20"></textarea>
</form>

The fieldset and legend element

• The <fieldset></fieldset> element is used to group related data in a form.
• The <legend></legend> elements defines a caption for <fieldset> element.

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="fname">First Name:</label>
    <input type="text" name="fname" id="fname"> <br />
    <label for="lname">Last Name:</label>
    <input type="text" name="lname" id="lname"> <br />
    <input type="submit" name="btnsave" value="Save">
  </fieldset>
</form>

The button element

• The <button></button> element is used to create a clickable button.
• The <button></button> element can be used to trigger custom JavaScript functions.

<button type="submit">Submit</button>
<button type="reset">Clear</button>
<button type="button">Print</button>

Summary Table

Credits

This webpage was created based on lessons provided by Rose Anne G. Cochanco as part of Web Development subject.

The form example is sourced from shadcn/ui.