HTML Form Elements

When creating a HTML form, the tag can be a jack of all trades. <input type="text"> prompts a user with a small text box. <input type="button"> prompts the user with a clickable button. There are a bunch of other input types including "email","username","password","checkbox", and of course "submit".

All of these input types cover alot of bases, but there are a couple of other HTML form elements that can be useful too. Here's some others that I used when making my first Sinatra app, which lets users make their own custom spells for D&D.

The <textarea> Element

The <textarea> tag creates a larger input field for when you want to give the user more room to respond. In my spellmaker app, I wanted the user to have more room for the spell description, so I did the following:

<label for="desc">Description:</label>

<textarea name="desc" rows="5" cols="50">Type Description here...</textarea>

The size of the textarea can be adjusted with the rows and cols attributes, and if you'd like to have some sort of message or default text in the box, just place it in between the start and end tags!

The <select> Element

The <select> tag creates a drop down list. Perfect for presenting the user with a selection of options, like Schools of magic:

<label for="school">School:</label>
    <select name="school">
        <option value="Abjuration">Abjuration</option>
        <option value="Conjuration">Conjuration</option>
        <option value="Divination">Divination</option>
        <option value="Enchantment">Enchantment</option>
        <option value="Evocation">Evocation</option>
        <option value="Illusion">Illusion</option>
        <option value="Necromancy">Necromancy</option>
    </select>

Now the user can select from a curated list of options. You'll notice we simply use the <option> tag to make each option.

The <fieldset> Element
This tag is a way of breaking up a form into two separate boxes. I didn't actually use this one for my project, but here's an example nonetheless:

<form>
  <fieldset>
    <legend>Person:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
  </fieldset>
  <fieldset>
    <legend>Pet:</legend>
    <label for="pname">Name:</label>
    <input type="text" id="pname" name="pname"><br><br>
  </fieldset>
  <input type="submit" value="Submit">
</form>

This is a stylistic element that draws a box around different parts of your form. The <legend> tag can be used to caption each box.