Creating Forms in HTML | HTML5 for Web Development - Software Development PDF Download

Introduction

HTML forms are used to collect user input on websites. They typically contain various input elements like text fields, checkboxes, radio buttons, dropdowns, and more. When a user submits a form, the data is sent to a server for processing.

Basic Structure of a Form

To create a form in HTML, you need to use the '<form>' element. It acts as a container for all the input elements within the form. Here's an example of a basic form structure:

<form>

  <!-- Input elements go here -->

</form>

Input Types

HTML provides several input types that allow users to enter different kinds of data. Let's explore some commonly used input types and see how they are implemented.

Text Input

Text inputs are used for single-line text input. Here's an example:

<label for="name">Name:</label>

<input type="text" id="name" name="name">

• '<label>': Defines a label for the input field.
• 'for="name"': Associates the label with the input field using the 'id' attribute.
• '<input>': Creates the input field.
• 'type="text"': Specifies that the input is a text field.
• 'id="name"': Assigns a unique identifier to the input field.
• 'name="name"': Assigns a name to the input field.

Password Input

Password inputs are similar to text inputs, but the entered text is masked for security purposes. Here's an example:

<label for="password">Password:</label>

<input type="password" id="password" name="password">

Checkbox Input

Checkbox inputs allow users to select multiple options. Here's an example:

<label for="option1">

  <input type="checkbox" id="option1" name="option[]" value="Option 1"> Option 1

</label>

<label for="option2">

  <input type="checkbox" id="option2" name="option[]" value="Option 2"> Option 2

</label>

• 'name="option[]"': The '[]' brackets indicate that multiple checkboxes can be selected.
• 'value="Option 1"': Specifies the value to be sent to the server when the checkbox is selected.

Radio Button Input

Radio buttons are used when users need to select a single option from a group. Here's an example:

<label for="option1">

  <input type="radio" id="option1" name="option" value="Option 1"> Option 1

</label>

<label for="option2">

  <input type="radio" id="option2" name="option" value="Option 2"> Option 2

</label>

• 'name="option"': Ensures that only one radio button can be selected from the group.

Select Dropdown

Select dropdowns allow users to choose an option from a list. Here's an example:

<label for="country">Country:</label>

<select id="country" name="country">

  <option value="USA">United States</option>

  <option value="UK">United Kingdom</option>

  <option value="Canada">Canada</option>

</select>

• '<select>': Creates the dropdown list.
• '<option>': Defines each option within the dropdown.
• 'value="USA"': Specifies the value to be sent to the server when an option is selected.

Textarea Input

Textarea inputs are used for multi-line text input. Here's an example:

<label for="message">Message:</label>

<textarea id="message" name="message" rows="4" cols="50"></textarea>

• '<textarea>': Creates the textarea input field.
• 'rows="4"': Specifies the number of visible rows.
• 'cols="50"': Specifies the number of visible columns.

Form Validation

Form validation ensures that users provide valid data before submitting a form. HTML5 provides built-in form validation attributes. Here's an example:

<input type="text" id="email" name="email" required>

• 'required': Specifies that the field must be filled out before submitting the form.

Sample Problems with Solutions

Problem 1: Create a form with three text inputs: "First Name," "Last Name," and "Email Address." Add a submit button to the form.

<form>

  <label for="firstName">First Name:</label>

  <input type="text" id="firstName" name="firstName"><br>

  <label for="lastName">Last Name:</label>

  <input type="text" id="lastName" name="lastName"><br>

  <label for="email">Email Address:</label>

  <input type="email" id="email" name="email"><br>

  <input type="submit" value="Submit">

</form>

Problem 2: Create a form with a dropdown to select a favorite programming language: "JavaScript," "Python," and "Java." Add a checkbox to agree to the terms and conditions.

<form>

  <label for="programmingLanguage">Favorite Programming Language:</label>

  <select id="programmingLanguage" name="programmingLanguage">

    <option value="JavaScript">JavaScript</option>

    <option value="Python">Python</option>

    <option value="Java">Java</option>

  </select><br>

  <label for="terms">

    <input type="checkbox" id="terms" name="terms" required> I agree to the terms and conditions

  </label><br>

  <input type="submit" value="Submit">

</form>