Skip to content

Instantly share code, notes, and snippets.

@jonashansen229
Last active November 10, 2021 13:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jonashansen229/4533899 to your computer and use it in GitHub Desktop.
Save jonashansen229/4533899 to your computer and use it in GitHub Desktop.
HTML5 - required fields, placeholders, types, pattern and datalist
<!DOCTYPE html>
<head>
<title>HTML5 TryOut</title>
<meta charset="UTF-8">
</head>
<body>
<form autocomplete="on">
*First Name: <input placeholder="First name" name="fname" type="text" required /> <br />
*Last name: <input type="text" name="lname" placeholder="Last name" /><br />
Telephone: <input type="tel" name="phone" /> <br/>
*Email: <input type="email" name="email" required /><br />
Favorite Animal: <input type="text" name="animal" list="animals" /> (Using datalist. Try typing "D" or "B" or doubleclick)<br />
ID Number:
<input type="text" placeholder="enter your 5 digit id number" name="idNumber" pattern="[0-9]{5}" /> (Try typing "123" or "123456" or "abcde") <br />
<datalist id="animals">
<option value="Dog">
<option value="Dolphin">
<option value="Duck">
<option value="Cat">
<option value="Bird">
<option value="Mouse">
</datalist>
<input type="submit" />
</form>
* = Required fields. Try leave them blank.<br /><br />
<i>This script need a HTML5 browser like Chrome</i>
</body>
</hmtl>
@moniquemyrria
Copy link

HBHJJ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment