Forms and input types | HTML Forms and Tables Tutorial

HTML Forms and Tables: Forms and Input Types

Forms are essential for collecting user input in web applications. HTML provides the <form> element to create forms, and various <input> types to gather different kinds of data.

The `<form>` Element

The <form> element defines an HTML form for user input. Key attributes include:

action: Specifies where to send the form-data when a form is submitted. This is usually a URL.
method: Specifies the HTTP method to use when submitting the form data. Common values are:
- get: Appends form data to the URL. Suitable for non-sensitive data.
- post: Sends form data in the HTTP message body. Suitable for sensitive data and larger amounts of data.
enctype: Specifies how the form data should be encoded when submitting it to the server. Common values:
- application/x-www-form-urlencoded: Default encoding. Data is encoded as key-value pairs.
- multipart/form-data: Used for uploading files.
- text/plain: Data is sent as plain text.

Example:

<form action="/submit-form" method="post">
  <!-- Form elements go here -->
</form>

Input Types

The <input> element is the most common element used within a form. The type attribute determines the kind of input control to be displayed. Here's a breakdown of common input types:

text: A single-line text input field.

<input type="text" id="name" name="name" placeholder="Enter your name">

password: A password input field. Characters are masked (usually with asterisks).
```
<input type="password" id="password" name="password">
```
email: An email input field. Browsers often provide validation to ensure the input is a valid email address.
```
<input type="email" id="email" name="email">
```
number: An input field for numbers. Browsers may provide up/down arrows for incrementing/decrementing the value.
```
<input type="number" id="age" name="age" min="0" max="120">
```
date: An input field for selecting a date. The appearance varies by browser.
```
<input type="date" id="birthday" name="birthday">
```

time: An input field for selecting a time.

<input type="time" id="appointment" name="appointment">

datetime-local: An input field for selecting a date and time without a timezone.
```
<input type="datetime-local" id="meeting" name="meeting">
```

checkbox: A checkbox. Allows the user to select one or more options from a list.

<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">I agree to the terms and conditions</label>

radio: A radio button. Allows the user to select only one option from a group. Radio buttons with the same name attribute belong to the same group.

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

file: An input field for selecting files to upload. Requires enctype="multipart/form-data" in the <form> tag.
```
<input type="file" id="resume" name="resume">
```
submit: A button that submits the form.
```
<input type="submit" value="Submit">
```
reset: A button that resets the form fields to their default values.
```
<input type="reset" value="Reset">
```
button: A generic button. Often used with JavaScript to perform custom actions.
```
<input type="button" value="Click Me" onclick="myFunction()">
```
hidden: A hidden input field. Not displayed to the user, but can be used to store data that needs to be submitted with the form.
```
<input type="hidden" id="userId" name="userId" value="123">
```
range: A slider control for selecting a number within a specified range.
```
<input type="range" id="volume" name="volume" min="0" max="100">
```

color: A color picker.

<input type="color" id="favColor" name="favColor">

Labels

The <label> element is used to associate a text label with an input element. This improves accessibility and usability. Use the for attribute in the <label> to match the id attribute of the corresponding input.

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

Form Attributes for Accessibility and Validation

required: Specifies that an input field must be filled out before the form can be submitted.
```
<input type="text" id="name" name="name" required>
```
placeholder: Provides a hint to the user about the expected input. The placeholder text disappears when the user starts typing.
```
<input type="text" id="city" name="city" placeholder="Enter your city">
```

pattern: Specifies a regular expression that the input value must match.

<input type="text" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

autofocus: Specifies that the input field should automatically receive focus when the page loads.
```
<input type="text" id="username" name="username" autofocus>
```
disabled: Disables the input field, making it uneditable and un-submittable.
```
<input type="text" id="readonlyField" name="readonlyField" disabled>
```
readonly: Makes the input field uneditable, but its value is submitted with the form.
```
<input type="text" id="readonlyField" name="readonlyField" readonly>
```

These input types and attributes provide a powerful toolkit for creating effective and accessible HTML forms. Remember to choose the appropriate input type for the data you are collecting and to use labels and validation attributes to improve the user experience.

HTML Forms and Tables: Forms and Input Types

The <form> Element

Input Types

Labels

Form Attributes for Accessibility and Validation

The `<form>` Element