Forms

Tags
Forms, Bootstrap

Here's a BS form.

E.g., Willow Rosenberg
Show all

Here's a contact form:

We'll never share your email with anyone else.

Soooo much better looking than what we made earlier.

Show all

Making a form with Bootstrap

Let's make a simple form, like this:

Here's the code.

  • <form class="m-4 p-4 border">
  •     <div class="mb-3">
  •         <label for="userName">Name</label>
  •         <input type="text" class="form-control" id="userName" placeholder="E.g., Jane Smith">
  •     </div>
  •     <button type="submit" class="btn btn-primary">Send</button>
  • </form>

The form's HTML is wrapped in a form tag:

  • <form>
  • ...
  • </form>

The one above has some BS classes that change the look of the form:

  • <form class="m-4 p-4 border">
  • ...
  • </form>

These are standard classes built-in to BS. I didn't have to define them myself. m-4 makes a margin around the form. border adds a border. p-4 makes some padding between the border and the form's contents.

Show all

Form widgets

Here's the form and its code again.

Here's the code.

  • <form class="m-4 p-4 border">
  •     <div class="mb-3">
  •         <label for="userName">Name</label>
  •         <input type="text" class="form-control" id="userName" placeholder="E.g., Jane Smith">
  •     </div>
  •     <button type="submit" class="btn btn-primary">Send</button>
  • </form>

There are two widgets on the form:

  • A text field
  • A submit button

As usual, you copy-and-paste code from this page (or the official Bootstrap site), and make your changes. Here's the text widget's code, with things you'd modify marked:

  • <form class="m-4 p-4 border">
  •     <div class="mb-3">
  •         <label for="userName"> Name </label>
  •         <input type="text" class="form-control" id="userName" placeholder="E.g., Jane Smith">
  •     </div>
  •     <button type="submit" class="btn btn-primary">Send</button>
  • </form>

There are three things to change here. First, there's the text of the label. Change it from "Name" to whatever you need. Second, there's the placeholder text. This one gives an example of what you want users to type. Examples are Good Things.

The third thing to change is the id of the input tag. input is the tag that makes the control, in this case, a text box. Each input needs an id, so the server knows what data goes with which field. It's the same sort of id that you've used before.

Notice that the id is also used in the label tag.

  • <form class="m-4 p-4 border">
  •     <div class="mb-3">
  •         <label for="userName">Name</label>
  •         <input type="text" class="form-control" id="userName" placeholder="E.g., Jane Smith">
  •     </div>
  •     <button type="submit" class="btn btn-primary">Send</button>
  • </form>

This helps screen readers and other software know which labels go with which controls. For example, click on the label "Name" in the form:

Notice that the widget gets the focus, since its id is in the label's for attribute.

Show all

The button is straightforward:

  • <form ...>
  •   <button type="submit" class="btn btn-primary"> Send </button>
  • </form>

The only thing you might change is the button's text.

One note, though. I didn't want the buttons on this page to actually send data anywhere, so here's what I did.

  • <form ...>
  •   <button type="button" class="btn btn-primary" onclick="alert('Clicky click')" >Send</button></form>

The type attribute changed from submit to button. Then I added onclick="alert('Clicky click')". This tells the browser that when the button is clicked, it should show a message.

Show all

Other widget types

You've seen the text input widget:

  • <div class="mb-3">
  •     <label for="userName">Name</label>
  •     <input type="text" class="form-control" id="userName" placeholder="E.g., Jane Smith">
  • </div>

There are many other types as well. There's one for email addresses:

  • <div class="border m-4 p-4">
  •   <label for="exampleInputEmail1">Email address</label>
  •   <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  •   <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  • </div>

It renders as:

We'll never share your email with anyone else.

Another for passwords.

  • <div class="form-group border m-4 p-4">
  •   <label for="exampleInputPassword11">Password</label>
  •   <input type="password" class="form-control" id="exampleInputPassword11">
  • </div>

It renders as:

There are dropdowns:

  • <div class="form-group border m-4 p-4">
  •   <label for="exampleFormControlSelect1">What do you want for your birthday?</label>
  •   <select class="form-select" id="exampleFormControlSelect1" aria-label="Birthday presents?">
  •     <option>Dogs</option>
  •     <option>More dogs</option>
  •     <option>Even more dogs</option>
  •     <option>Many dogs</option>
  •     <option>All the dogs</option>
  •   </select>
  • </div>

It looks like:

There are others, too. Check out the official documentation.

Show all

Summary

  • Forms let users enter data.
  • Bootstrap can show many different form controls.
  • Copy-and-paste a template, then adjust to your needs.

Up next

That's it for the Bootstrap lessons! Hooray!

​