Restrict data entry

More about WEB PAGE

Anatomy of the <head>

Grouping content

Creating advanced tables

Form Handling

Customizing the input element

Using input validation

Using the input element to restrict data entry

HTML5 introduces some new values for the input element’s type attribute that let you be more specific about the kind of data that you want from the user. The table below summarizes these new type values.

Some of these input types present users with strong visual cues as to the kind of restrictions on the data that they may enter or choose (e.g., the checkbox and radiobutton types). Others, such as the email and url types, rely on input validation.

Using the input element to upload files

The final type of input element is file, which allows you to upload files to the server as part of the form submission.

<html>
  <head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman"/>
    <meta name="description" content="A simple example"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <form method="post" action="http://titan:8080/form" enctype="multipart/form-data">
      <input type="hidden" name="recordID" value="1234"/>
      <p>
        <label for="name">
          Name: <input value="Adam" id="name" name="name"/>
        </label>
      </p>
      <p>
        <label for="password">
          Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/>
        </label>
      </p>
      <p>
        <label for="fave">
          Favorite Fruit: <input type="text" id="fave" name="fave"/>
        </label>
      </p>
      <p>
        <input type="file" name="filedata"/>
      </p>
      <input type="submit" value="Submit"/>
    </form>
  </body>
</html>

You can upload files only when the encoding type for the form is multipart/form-data. As you can see, we have used the enctype attribute of the form element to set the encoding. You can see how the browser displays the input element below.

When the user clicks the Choose File button, they are presented with a dialog that allows a file to be selected. When the form is submitted, the contents of the file will be sent to the server.