HTML/CSS Bootstrap Workshop March 2017


Last Section

Part 5: An HTML Form

  1. Forms allow information to be submitted using HTML and usually some kind of web programming language. We'll just be creating a basic form today, using the "Basic Example" at getbootstrap.com/css/#forms
  2. Use this starter code:
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" name="exampleInputEmail1" id="exampleInputEmail1" placeholder="Email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" name="exampleInputPassword1" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="checkbox">
        <label>
          <input name="checkboxtest" type="checkbox"> Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  3. Make sure each element also has a name="" attribute that matches its id.
  4. Add a new input with type "date", "time", "number", or "email". This will do some basic validation of what the user enters.
  5. Test your form. If done correctly, you'll see what you put in the inputs appear in your URL. If writing a real webapp form, you could then read those values in and do something with them!

Bonus Topics!

Next Section


Creative Commons License
Tutorial by Bryan Sherwood, NAU ITS STC