Introduction to HTML Forms

Emmanuel BRUNO

emmanuel.bruno@univ-tln.fr

Université de Toulon

LIS UMR CNRS 7020

2024-10-31

Creating Interactive Forms with HTML

Purpose of Forms:
- Collect user input and data for various applications.
- Facilitate user interactions on websites.
HTML Form Elements:
- Provide a variety of elements to create different types of forms.
- Include text fields, checkboxes, radio buttons, dropdowns, and more.
Best Practices:
- Design forms for usability and accessibility.
- Ensure clear labels and instructions.
- Validate input on both client-side and server-side.
Overview:
- Explore common form elements.
- Learn best practices for form design and usability.

Basic Form Elements - Text and Password Fields

Text fields: <input type="text">

For single-line text input.

Example:

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

Password fields: <input type="password">

For secure password input.

Example:

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

Additional Form Elements

Email fields: <input type="email">

For email address input.

Example:

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@example.com">

Checkboxes: <input type="checkbox">

For selecting multiple options.

Example:

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

Radio Buttons: <input type="radio">

For selecting one option from a group.

Example:

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

Dropdowns: <select>

For selecting an option from a dropdown list.

Example:

<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>

Text Areas: <textarea>

For multi-line text input.

Example:

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

Form Submission

Submit Button: <input type="submit">
- For submitting the form data.
- Example:
```
<input type="submit" value="Submit">
```

Form Action and Method:

Define where and how the form data is sent.

Example:

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

Best Practices for Form Design

Usability:
- Ensure forms are easy to understand and use.
- Provide clear labels and instructions.
Accessibility:
- Make forms accessible to all users, including those with disabilities.
- Use appropriate HTML attributes and ARIA roles.
Validation:
- Validate input on both client-side and server-side.
- Provide helpful error messages and feedback.
Security:
- Protect against common security threats such as SQL injection and cross-site scripting (XSS).
- Use secure methods for handling and storing form data.

Complete Form Example

<!DOCTYPE html>
<html>
<head>
  <title>Contact Form</title>
</head>
<body>
  <h1>Contact Us</h1>
  <form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="example@example.com">

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

    <label for="message">Message:</label>
    <textarea id="message" name="message" placeholder="Enter your message here" rows="4" cols="50"></textarea>

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