HTML5 advanced input Elements
- Introduction to input element
- New Input Types
- Example
The <input> element is the most important form tag. The <input> tag is displayed in several ways, depending on the type attribute.
HTML5 introduces a number of new input types.
New Input Types:
1.<input type="color">:
When user want to create color picker this is used. The <input type=”color”> defines a color picker. The color value gives in hexadecimal format (#rrggbb) or color name. By default value is #000000, which is black.
<form>
<h2>Select Your Color: <input type="color" value="#00ff00"></h2>
</form>
2.<input type="number"> :
For entering numerical values number input type is used. Additional attributes are min,max and step.
Example-Enter a number value between 10 to 20.
<form>
<h3>Enter Number Values:<input type="number" min=10 max=20 step=1></h3>
</form>
3.<input type="url">:
For entering web addresses or URL's this input type is used. When you want to enter multiple URL's use multiple attribute.
<form>
<h3>Enter Website Address:<input type="url " required> </h3>
</form>
4.<input type="image">:
<input type=”image”> elements of type image are used to create graphical submit buttons,
<input type="image" id="image" alt="Login" src="/media/examples/login-button.png">
5.<input type="date">:
For select a date from calendar drop down menu this input type is used. Here date value contains year, month and day but not include time.
<form>
<h3>Select Date :<input type="date" value="2020-10-24"></h3>
</form>
6.<input type="email">:
When user want to enter e-mail address, email input type is used.
<form>
<h3>Enter Your E Mail Id:<input type="email" required></h3>
</form>
7.<input type="month">:
For selection of a month and year from calendar, month input type used. This gives result as a YYYY-MM year in four digits and month in number.
<form>
Select Month:<input type="month"></h3>
</form>
8.<input type="range">:
This type of input is used for entering numerical values within a specified range.
<form>
<h3>Select Number Value:<input type="range" min=10 max=100 step=5></h3>
</form>
9.<input type="datetime-local">:
Using this input type user select local date and time with year, month and day. It also shows time in hours and minutes.
<form>
Select Date and Time:<input type="datetime-local"></h3>
</form>
10.<input type="time">:
This time input type is used for entering a time in hours and minutes. Time format used by browser i.e.12 or 24 hours depends upon the local system time format.
<form>
Select Time:<input type="time">
</form>
11.<input type="week">:
Using this week input type, user select a week and year from calendar.
<form>
Select Week:<input type="week">
</form>
12.<input type="search">:
For creating search input fields, Use search input type.
<form>
<h3>Type to Search Website:<input type="search"></h3>
</form>
13.<input type="file">:
Using this input type we defines a file select field with a browse button for file uploads.
For multiple files to be selected, we have to add multiple attribute.
<form>
File to Upload:<input type="file" name="sample"></h3>
</form>
14.<input type="tel">:
For entering a telephone number "tel" input type is used. Browser's don't support tel input validation, use the placeholder attribute to help users in entering correct format phone number.
<form>
<h3>Enter Telephone Number:<input type="tel" placeholder="xx-xxxx-xxxx" required></h3>
</form>
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>Forms in html 5 </title></head>
<body>
<form>
Select Color: <input type="color" value="#0000ff"><br><br>
Enter Number:<input type="number" min="10" max="100" step="10"><br><br>
Enter Website URL:<input type="url" required><br><br>
Select Date:<input type="date" value="2020-10-24"><br><br>
Enter Email Address: <input type="email" required><br><br>
Select Month: <input type="month"><br><br>
<input type="image" alt="Login" src="C:\Users\Arman\Desktop\Submit button.jpg">
</form>
</body></html>
Example 2:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Forms in html 5 </title>
</head>
<body>
<form>
<b>Choose Date and Time:</b><input type="datetime-local"><br><br>
<b>Select Time:</b><input type="time"><br><br>
<b>Select Week:</b> <input type="week"><br><br>
<b>Search Website:</b> <input type="search"><br><br>
<b>Select a file:</b><input type="file" name="myfile"><br><br>
<b>Telephone Number:</b><input type="tel" placeholder="xx-xxxx-xxxx"><br><br>
<input type=submit value=submit>
</form>
</body>
</html>
Visit here and learn new trends and technologies everything.
Please Comment and Share. ConversionConversion EmoticonEmoticon