HTML Forms – Learn to Create Forms and Collect User Input

An HTML form is defined using the <form> tag. It typically includes form elements like <input>, <textarea>, <button>, and others.

Basic Example:

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

2. Form Attributes

Attributes provide additional information about the form and its elements. Key form attributes include:

action: Specifies the URL where the form data is sent.
method: Defines the HTTP method to use (get or post).
enctype: Specifies the encoding type for the form data when submitting.
- application/x-www-form-urlencoded (default)
- multipart/form-data (used for file uploads)
- text/plain

Example:

<form action="/submit" method="post" enctype="multipart/form-data">
  <!-- form elements here -->
</form>

3. Common Form Elements and Their Attributes

a. Input Elements

The <input> element is versatile and supports various types:

type: Specifies the type of input (e.g., text, password, email, submit, file).
name: Name of the input, used as the key when data is submitted.
value: The default value of the input.
placeholder: Text displayed inside the input when it’s empty.
required: Indicates that the input must be filled out before submitting.
maxlength: Specifies the maximum number of characters allowed.

Example:

<input type="text" name="username" placeholder="Enter your username" required>

b. Textarea

The <textarea> element is used for multi-line text input.

Attributes:

rows: Number of visible text lines.
cols: Width of the text area in character columns.
maxlength: Maximum number of characters allowed.

Example:

<textarea name="message" rows="4" cols="50" maxlength="200" placeholder="Enter your message"></textarea>

c. Select and Option

The <select> element creates a drop-down list, and <option> defines the options within it.

Example:

<select name="country">
  <option value="usa">USA</option>
  <option value="canada">Canada</option>
  <option value="uk">UK</option>
</select>

d. Button

The <button> element creates a clickable button. It can submit forms or trigger JavaScript.

Attributes:

type: Specifies the button type (button, submit, reset).

Example:

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

4. Form Validation Attributes

HTML5 provides built-in validation attributes to enhance form usability:

required: Ensures the field must be filled out.
pattern: Defines a regex pattern the input must match.
min / max: Specifies the minimum or maximum value for numeric inputs.
minlength / maxlength: Sets the minimum or maximum length of the input.

Example:

<input type="email" name="email" required>
<input type="password" name="password" minlength="8" required>

5. File Uploads

To allow file uploads, use the file input type and set enctype="multipart/form-data" in the form.

Example:

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="profile_picture">
  <input type="submit" value="Upload">
</form>

6. Example: A Complete Form

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Example</title>
</head>
<body>
  <h2>Contact Us</h2>
  <form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Your Name" required><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Your Email" required><br><br>

    <label for="message">Message:</label><br>
    <textarea id="message" name="message" rows="4" cols="50" placeholder="Your Message"></textarea><br><br>

    <input type="submit" value="Send">
  </form>
</body>
</html>

Try It Now

Conclusion

HTML forms are a fundamental way to gather and process user input on websites. By understanding and using form attributes effectively, you can create forms that are both functional and user-friendly.