Forms and Inputs— Forms

• Creating Forms (<form>)
• Basic form structure and tags
• Input Types (<input>, <textarea>, <select>, <button>)
• Different types of input elements
• Form Attributes (action, method)
• Defining form behavior and submission
• Form Validation (required, pattern)
• Adding validation attributes to inputs

HTML Forms

HTML forms are used to collect user input and submit it to a server for processing. They are essential for creating interactive web applications where users can provide information, such as contact forms, login forms, and surveys.

Creating Forms (<form>)

Basic Form Structure and Tags:

A form is created using the <form> tag, which contains various input elements and attributes to define its behavior.

<form action="/submit_form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br />
  <input type="submit" value="Submit" />
</form>

This code creates a basic form with text and email input fields and a submit button.

Input Types (<input>, <textarea>, <select>, <button>)

Different Types of Input Elements:

1. Text Input (<input type="text">):

<label for="username">Username:</label>
<input type="text" id="username" name="username" />

2. Password Input (<input type="password">):

<label for="password">Password:</label>
<input type="password" id="password" name="password" />

3. Email Input (<input type="email">):

<label for="email">Email:</label> <input type="email" id="email" name="email" />

4. Number Input (<input type="number">):

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="100" />

5. Radio Buttons (<input type="radio">):

<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male" /> Male
<input type="radio" id="female" name="gender" value="female" /> Female

6. Checkboxes (<input type="checkbox">):

<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" />

7. Textarea (<textarea>):

<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>

8. Select Dropdown (<select>):

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="usa">USA</option>
  <option value="canada">Canada</option>
  <option value="uk">UK</option>
</select>

9. Button (<button>):

<button type="submit">Submit</button>

Form Attributes (action, meth od)

Defining Form Behavior and Submission:

1. ** Attribute (action):** The action attribute specifies the URL where the form data should be sent when the form is submitted.

<form action="/submit_form" method="post"></form>

2. Method Attribute (method): The method attribute specifies the HTTP method to use when sending form data. Common values are get and post.

• GET Method: Sends form data as URL parameters. Suitable for retrieving data without side effects.

<form action="/search" method="get">
  ``` - **POST Method:** Sends form data as a request body. Suitable for
  submitting data that changes server state. ```html
  <form action="/submit_form" method="post">
    ``` #### Form Validation (required, pattern) **Adding Validation Attributes
    to Inputs:** 1. **Required Attribute (`required`):** The `required`
    attribute ensures that an input field must be filled out before the form can
    be submitted. ```html
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required />
  </form>
</form>

2. Pattern Attribute (pattern): The pattern attribute specifies a regular expression that the input value must match.

<label for="zipcode">Zip Code:</label>
<input type="text" id="zipcode" name="zipcode" pattern="[0-9]{5}" required />

This example ensures that the zip code input must be exactly five digits.

3. Other Validation Attributes:

• min and max for numeric inputs
• maxlength and minlength for text inputs
• step for numeric inputs to specify valid intervals

Example:

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="100" step="1" required />

By understanding and using these elements and attributes, you can create robust, interactive forms that collect and validate user input efficiently.