A review of the different input types

There are many different types of input that can be used in html. While some of them were covered in class and used, I want to take some time to explore some of the others that weren’t talked about. We will start with the ones used in class and review them; then move on and cover the other ones in more detail. This will not be a complete list but should hit most of the main ones used.

Input Type Text:

This is where we can have the end user type into a box and then save that information, this is most useful when having people fill out a form. The example below is how one would be set up for entering an author or book into a library database.

<form>
    <label for=”aName”>Author’s name”:</label>
    <input type=”text” id=”aName” name=”aName”>
    <Label for=”bName”>Book’s title”:</label>
    <input type=”text” id=”bName” name=”bName”>
</form>

      

Input Type Password:

This type of input is used when sensitive information is requested, such as password, social security number, etc. It is similar to the text type expect it will block out the information that is input. Below is an example to show how we could help protect the end user privacy, if they were trying to login to a library database.

<form>
  <label for=”username”>Username:</label>
  <input type=”text” id=”username” name=”username”>
  <label for=”pwd”>Password:</label>
  <input type=”password” id=”pwd” name=”pwd”>
</form>

      

Input Type Submit/Reset:

The submit type would be used to create a submit button to get data from a form into a form-handler. This form-handler is typically pointed to a server that will be used to store the information till it is called for in a script. The reset type can be used with the submit type to help clear the form to the default values that we have set for it. In the example below we set the default values of the first name and last name to John Doe, if we change the information in the text type and then click on the reset it will put the text type back to John Doe. Please note that the submit button will not work on this webpage.

<form action=”/sample_page.php”>
  <label for=”fname”>First name:</label>
  <input type=”text” id=”fname” name=”fname” value=”Sandy”>
  <label for=”lname”>Last name:</label>
  <input type=”text” id=”lname” name=”lname” value=”Mitchell”>
  <input type=”submit” value=”Submit”>
  <input type=”rest” value="Reset”>
</form>