Skip to main content

7.1 - Introduction to Forms

Forms are HTML elements that take in user input. Forms hold form elements, such as input, select, or button. We can use them to create useful applications, such as a user sign-up page.

What are Forms?​

Think of a user sign-up page. It might have many fields for a new user to create a password, input their name, etc. All of these elements would be contained in a Form HTML element.

<form> is an HTML element which designates a section of webpage that takes in user input. It contains various "form elements" for different types of inputs.

<form>
  .
  form elements
  .
</form>

Form Elements​

The HTML <form> element can contain one or more form elements. Here are 4 key form elements, though there are many more. A full list of HTML elements can be found here: HTML Form Elements.

Input Element​

Type Attribute​

<input> is a versatile form element. It takes in an optional type attribute, which controls what kind of input box is displayed. A few possible type values are: "text", "password", "email", "date", and "checkbox".

tip

The default value of the type attribute is "text".

A full list of input types can be found here: HTML Form Input Types.

Placeholder Attribute​

<input> also takes in an optional placeholder attribute, which specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).

The short hint is displayed in the input field before the user enters a value.

note

The placeholder attribute works with the following input types: text, search, url, number, tel, email, and password.

Label Element​

<label> is an element that labels another form element. It takes in an optional for attribute, which should be equal to the id attribute of the input element to bind them together.

Input and Label Examples​

Here is how you might use the input and label elements together:

Text example​
<form>
  <label htmlFor="fullName">Full name</label><br>
  <input type="text" id="fullName" name="fullName">
</form>
Email example (with placeholder)​
<form>
  <label htmlFor="email">Email</label><br> 
  <input type="email" id="email" name="email" placeholder="name@example.com">      
</form>
Password example​
<form>
  <label htmlFor="password">Password</label><br>
  <input type="password" id="password" name="password"><br>
</form>

Select Element​

The <select> element is a dropdown menu. The <select> element itself contains multiple <option> elements.

By default, the <select> element lets users select only one option.

Default Option​

The default option selected is by default the first option.

tip

A nice trick is to use the first option as a placeholder, a sort of hint to the user (e.g. "Select only one option"). The associated value of the option can be "".

Button Element​

<button> defines a clickable button. It takes in a type attribute, which controls the default behavior of the button. The three possible type values are: "submit", "reset", and "button".

note

Always specify the type attribute for the button element. Different browsers may use different default types for the button element.

Submission​

The main button type value you will use is "submit". This is the default if the type attribute is not specified or is empty/invalid. Clicking a <button type="submit"> will trigger the onSubmit event.

Select and Button example​

<label htmlFor="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
  <option value="">--Choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
</select><br>

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