📖 Creating Web Forms

Purpose of Web Forms

Web forms allow users to provide input that can be processed by a server or handled in another way. In this course, your forms will submit to a confirmation page (success.html) to simulate form processing.

Basic Form Structure

<form name="contact" action="success.html" method="post">
  <!-- Form fields go here -->
</form>

The <form> tag wraps your fields. The action tells the browser where to send data after submission, and method="post" securely sends the data.

Common Form Elements

Text Field

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

Email Field (with Validation Example)

When using type="email", the browser checks that the user enters a valid email address before submitting. This only works when the field is inside a form with a submit button.

<form action="success.html" method="get">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <input type="submit" value="Submit">
</form>

Telephone Input

The type="tel" input lets users enter a phone number. It does not enforce formatting or make a call on its own. On mobile devices, the browser may show a dial-friendly keypad for this input type. The webpage doesn't “know” how to make a call — but if you use a <a href="tel:..."> link, clicking it will prompt the phone to start a call.

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890">

Password Field (Obfuscated Input)

A password field hides the characters as the user types, displaying dots or asterisks instead of the actual text.

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

Textarea

The <textarea> element creates a multi-line text box, allowing users to enter longer, freeform responses such as comments, questions, or special instructions. Unlike a standard text input, the textarea expands vertically and provides more space for users to see what they’re typing. You can control its size using the rows and cols attributes or with CSS.

It’s important to pair a <textarea> with a proper <label> for accessibility, so that screen readers can announce its purpose. You can also use placeholder to provide a hint about the expected content.

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


Checkbox

The type="checkbox" input allows users to select one or more options from a set of choices. Each checkbox operates independently, so selecting one does not affect the others. Checkboxes are often used for optional features or agreements, such as subscribing to a newsletter or accepting terms. Be sure to include a <label> for each checkbox so users know what they’re selecting, and so the form remains accessible.

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

Radio Buttons

The type="radio" input lets users select only one option from a group. All radio buttons in a group share the same name attribute, which ensures that selecting one button deselects the others. Radio buttons are ideal for single-choice questions, such as selecting a preferred contact method. Always pair each radio button with a <label> for clarity and accessibility.

<label><input type="radio" name="contactMethod" value="email" checked> Email</label>
<label><input type="radio" name="contactMethod" value="phone"> Phone</label>

Select

The <select> element creates a dropdown menu or a scrolling list of options. Each choice within the menu is defined by an <option> tag. By default, users can select one option, but adding the multiple attribute allows for multiple selections. The <select> element is useful when space is limited or when you want to present a list of options compactly. Always include a <label> to describe the purpose of the menu.

<label for="topic">Topic:</label>
<select id="topic" name="topic">
  <option value="support">Support</option>
  <option value="sales">Sales</option>
</select>

Date Picker

The type="date" input provides a browser-native date picker. Users can select a date from a calendar popup rather than typing it manually. This improves accuracy and usability, especially on mobile devices. Browser support is good in modern browsers, but older browsers will fall back to a simple text input.

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

File Input

<label for="file">Upload file:</label>
<input type="file" id="file" name="file">

Submit and Reset

<input type="submit" value="Submit">
<input type="reset" value="Reset">

Styling Your Form with CSS

CSS helps you make your form more readable and user-friendly. Below is an example of simple CSS you can apply to improve the appearance of your form fields and labels.

input, textarea, select {
  width: 100%;
  padding: 0.5em;
  margin-bottom: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

label {
  display: block;
  font-weight: bold;
  margin-top: 1em;
}

input[type="submit"], input[type="reset"] {
  width: auto;
  padding: 0.5em 1em;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="submit"]:hover, input[type="reset"]:hover {
  background-color: #0056b3;
}

These styles create a clean, consistent look across your form controls, making your form easier for users to read and interact with.

Here’s how it looks applied to a form:

<form action="#" method="get">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

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

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

Accessibility Best Practices

Always link labels to controls
Use for + id so screen readers can announce inputs correctly.
Group related controls
Wrap in <fieldset> with a <legend> for clarity.
Use required and input types
Let the browser assist users in entering valid data.

Example Form

When you build your form, you'll pull together several of these form controls inside a single form tag to get a usable form.

Validation and Testing

Check your form code at the W3C Validator and run accessibility checks using WAVE.

Additional Resources

Last updated: June 22, 2025 at 10:41 AM