WikiGalaxy

Personalize

Chapter: HTML Form Elements

Point Heading: Introduction to Form Elements

HTML form elements are integral components that allow users to interact with web pages by submitting data to a web server. These elements provide a way for user inputs such as text fields, radio buttons, checkboxes, and submit buttons.

Text Input Elements

Point Heading: Single-line Text Input

The <input type="text"> element is used to create a single-line text box where users can enter text. It is often accompanied by the 'placeholder' attribute for hint text.

Point Heading: Password Input

The <input type="password"> element masks the input for sensitive information like passwords, replacing text with dots or asterisks.

Point Heading: Email Input

The <input type="email"> element validates that the user input follows the email format, enhancing form usability.


      <form>
        <label>Username:</label>
        <input type="text" name="username" placeholder="Enter your name">
        <br>
        <label>Password:</label>
        <input type="password" name="password">
        <br>
        <label>Email:</label>
        <input type="email" name="email">
      </form>

Console Output:

HTML form with text, password, and email input fields.

Selection Elements

Point Heading: Dropdown List

The <select> element creates a dropdown menu where users can select an option from predefined choices.

Point Heading: Radio Buttons

The <input type="radio"> element lets users select one option from a group. Each button in the group shares the same name attribute.

Point Heading: Checkboxes

The <input type="checkbox"> element allows users to select multiple options independently.


      <form>
        <label>Choose your favorite color:</label>
        <select name="colors">
          <option value="red">Red</option>
          <option value="blue">Blue</option>
          <option value="green">Green</option>
        </select>
        <br>
        <label>Gender:</label>
        <input type="radio" name="gender" value="male"> Male
        <input type="radio" name="gender" value="female"> Female
        <br>
        <label>Subscribe:</label>
        <input type="checkbox" name="subscribe"> Subscribe to newsletter
      </form>