saftutorials.com
HTML5 Form Element Tutorial

HTML5  have special form element. Like: color, url, week, date, datetime-local, range, search, tel, time, email, month, number

Examples:

1) HTML5 Form Color Element

HTML5 Form Color Element

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form Color Element Tutorials</title>
</head>
<body>
<form method="post">
  <input type="color" name="mycolor" id="mycolor">
  <button type="button" onclick="getColor()">Get Color Code</button>
</form>

<script type="text/javascript">
  function getColor() {
    alert(mycolor.value);
  }
</script>
</body>
</html>

HTML5 Form Color Element:


2) HTML5 Form URL Element

HTML5 Form URL Element

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form URL Element Tutorials</title>
</head>
<body>
<form method="post">
  <input type="url" name="myurl" id="myurl">
  <button type="button" onclick="getURL()">Get URL</button>
</form>

<script type="text/javascript">
  function getURL() {
    alert(myurl.value);
  }
</script>
</body>
</html>

HTML5 Form URL Element :


3) HTML5 Form Date Element

HTML5 Form Date Element

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form Date Element Tutorials</title>
</head>
<body>
<form method="post">
  <input type="date" name="mydate" id="mydate">
  <button type="button" onclick="getDate()">Get Date</button>
</form>

<script type="text/javascript">
  function getDate() {
    alert(mydate.value);
  }
</script>
</body>
</html>

HTML5 Form Date Element :


4) HTML5 Form Datetime-local Element

HTML5 Form Datetime-local Element

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form Datetime-local Element Tutorials</title>
</head>
<body>
<form method="post">
  <input type="datetime-local" name="mydate" id="mydate">
  <button type="button" onclick="getDatetime()">Get Date Time</button>
</form>

<script type="text/javascript">
  function getDatetime() {
    alert(mydate.value);
  }
</script>
</body>
</html>

HTML5 Form Datetime-local Element :


5) HTML5 Form Range Element

HTML5 Form Range Element

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form Range Element Tutorials</title>
</head>
<body>
<form method="post">
  Range: <input type="range" name="myrange" id="myrange" min="0" max="100000">
  <button type="button" onclick="getRange()">Get Range</button>
</form>

<script type="text/javascript">
  function getRange() {
    alert(myrange.value);
  }
</script>
</body>
</html>

HTML5 Form Range Element :

Range:

6) HTML5 Form Search Element

HTML5 Form Search Element

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form Search Element Tutorials</title>
</head>
<body>
<form method="post">
  <input type="search" name="mysearch" id="mysearch" min="0" max="100000">
  <button type="button" onclick="getSearch()">Search</button>
</form>

<script type="text/javascript">
  function getSearch() {
    alert(mysearch.value);
  }
</script>
</body>
</html>

HTML5 Form Search Element :


7) HTML5 Form Tel Element

HTML5 Form Tel Element

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form Tel Element Tutorials</title>
</head>
<body>
<form method="post">
  <input type="tel" name="mytel" id="mytel" min="0" max="100000">
  <button type="button" onclick="getTel()">Get Tel</button>
</form>

<script type="text/javascript">
  function getTel() {
    alert(mytel.value);
  }
</script>
</body>
</html>

HTML5 Form Tel Element :


8) HTML5 Form Time Element

HTML5 Form Time Element

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form Time Element Tutorials</title>
</head>
<body>
<form method="post">
  <input type="time" name="mytime" id="mytime" min="0" max="100000">
  <button type="button" onclick="getTime()">Get Time</button>
</form>

<script type="text/javascript">
  function getTime() {
    alert(mytime.value);
  }
</script>
</body>
</html>

HTML5 Form Time Element :


9) HTML5 Form Email Element

HTML5 Form Email Element

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form Email Element Tutorials</title>
</head>
<body>
<form method="post">
  <input type="email" name="myemail" id="myemail" min="0" max="100000">
  <button type="button" onclick="getEmail()">Get Email</button>
</form>

<script type="text/javascript">
  function getEmail() {
    alert(myemail.value);
  }
</script>
</body>
</html>

HTML5 Form Email Element :


10) HTML5 Form Number Element

HTML5 Form Number Element

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form Number Element Tutorials</title>
</head>
<body>
<form method="post">
  <input type="number" name="mynumber" id="mynumber" min="0" max="100000">
  <button type="button" onclick="getNumber()">Get Number</button>
</form>

<script type="text/javascript">
  function getNumber() {
    alert(mynumber.value);
  }
</script>
</body>
</html>

HTML5 Form Number Element :


11) HTML5 Form Month Element

HTML5 Form Month Element

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 Form Month Element Tutorials</title>
</head>
<body>
<form method="post">
  <input type="month" name="mymonth" id="mymonth" min="0" max="100000">
  <button type="button" onclick="getMonth()">Get Month</button>
</form>

<script type="text/javascript">
  function getMonth() {
    alert(mymonth.value);
  }
</script>
</body>
</html>

HTML5 Form Month Element :


Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic