Ensuring a Value Is an E-mail Address or URL

The email and url types of the input element ensure that the user has entered a valid e-mail address or fully qualified URL. We can use the pattern attribute to further restrict the values.

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
      <form method="post" action="http://yourServer/form">
            <input type="hidden" name="recordID" value="1234" />
            <p>
                  <label for="name"> Name: <input type="text" id="name"
                        name="name" pattern="^.* .*$" />
                  </label>
            </p>
            <p>
                  <label for="email"> Email: 
                  <input type="email"
                        placeholder="user@mydomain.com" required pattern=".*@mydomain.com$"
                        id="email" name="email" />
                  </label>
            </p>
            <input type="submit" value="Submit" />
      </form>
</body>
</html>

Click to view this demo.

Home
HTML CSS Book
HTML

Input Validation:

Using Input Validation
Ensuring the User Provides a Value
Ensuring a Value Is Within Bounds
Ensuring a Value Matches a Pattern
Ensuring a Value Is an E-mail Address or URL
Disabling Input Validation