HTML5 has many input types.
This article covers the new input types:
- color
- date
- number
- range
- search
- tel
- time
- url
Input type : Color
Color input is used to select color
<!DOCTYPE html>
<html>
<body>
<form>
Select your color: <input type="color" name="color" id="color"/><br>
<input type="submit" name="submit">
</form>
</body>
</html>
Input type: date
Date input type is used to select date
<!DOCTYPE html>
<html>
<body>
<form>
Select your color: <input type="date" name="date" id="date"/><br>
<input type="submit" name="submit">
</form>
</body>
</html>
Input type: email
<html>
<body>
<form>
Email : <input type="email" name="email" id="email" required/><br>
<input type="submit" name="submit">
</form>
</body>
</html>
Input type: number
<!DOCTYPE html>
<html>
<body>
<form>
Number : <input type="number" name="number" id="number" /><br>
<input type="submit" name="submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<form>
Number : <input type="range" name="range" id="range" min="1" max="10" /><br>
<input type="submit" name="submit">
</form>
</body>
</html>
Input type : search
search type is used to search fields
<html>
<body>
<form>
Search : <input type="search" name="search" id="search"/><br>
<input type="submit" name="submit">
</form>
</body>
</html>
Input type: tel
The tel type is contain a telephone number
<!DOCTYPE html>
<html>
<body>
<form>
Tel : <input type="tel" name="tel" id="tel" required/><br>
<input type="submit" name="submit">
</form>
</body>
</html>
Input type: url
The input type contains url values
<!DOCTYPE html>
<html>
<body>
<form>
Url : <input type="url" name="url" id="url" required/><br>
<input type="submit" name="submit">
</form>
</body>
</html>
Input type: time
Time type is used to enter time .
<html>
<body>
<form>
Time : <input type="time" name="time" id="time" required/><br>
<input type="submit" name="submit">
</form>
</body>
</html>
No comments:
Post a Comment