In HTML5 you can create a set list of selectable options for the <input> field, which will act like an auto-complete function or if your users do not want to select a suggestion from the list they can enter there own value into the <input> field. In-order to do all this with just HTML5 you will need to use the new <datalist> element for HTML5 and the <input> and <option> element's as well, you will also need to include the new list attribute for HTML5 and the id and value attributes, I will show you how to put all this together after I have finished explaining the element's and attributes.
First the <datalist> element is an inline element that creates a drop down menu of suggestions via the <option> elements, which are contained in the <datalist> element. The <datalist> element will also need the id attribute with a unique value.
The <datalist> element requires an end tag, for example </datalist>.
The <datalist>
element is allowed to use any global attribute, you can learn more
about global attributes and how to use them in an earlier tutorial that I
wrote called "What The Heck Are Global Attributes In HTML?".
If a browser doesn’t support the <datalist> element, then the associated <input> element will degrade to the <input> element type that is currently present in the <input> element, else if the current <input> element type is not supported by the browser or if there is no <input> element type present in the <input> element the <input> element will degrade to the <input> element type text.
The <datalist> element is used only with the <input> element types that accept text, excluding the password <input> element type. The valid <input> element types that you can use include the text, email, search, url, and number types.
Now the <option> element must be placed in-between the <datalist> start tag and the </datalist> end tag. Each <option> element can hold a predefined suggestion value or an empty value as well, you may even disable the <option> element using the disabled attribute for the <option> element. You will also need to include the value attribute for the <option> element, which will assign a value to the <option> element to be sent to the server. The <datalist> element can contain zero or more <option> element's intermixed with phrasing element's, like for instance the <a>, <span> and <img> element's.
Next we will have to link the <datalist> element to the <input> element via the <input> element's new list attribute for HTML5. The list attribute will indicate that the <input> control has a list of predefined suggestion values for the user to choose from, which are displayed by the <datalist> element. The list attributes value should be the same as the id attributes value that is associated with the <datalist> element.
Now let me show you how to code the new <datalist> element and the new list attribute for HTML5 along with the other attributes and element's to create our HTML5 web page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome To HTML5</title>
</head>
<body>
<form>
<label for="job_title">Job title:</label>
<input type="text" name="job_title" id="job_title" list="jobs">
<datalist id="jobs">
<option value="Web Monkey">Web Monkey</option>
<option value="Graphic Designer">Graphic Designer</option>
<option value="Mechanic">Mechanic</option>
</datalist>
</form>
</body>
</html>
And here is how to code the new <datalist> element and the new list attribute for HTML5 along with the other attributes and element's to create our XHTML5 web page.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome To XHTML5</title>
</head>
<body>
<form>
<label for="job_title">Job title:</label>
<input type="text" name="job_title" id="job_title" list="jobs" />
<datalist id="jobs">
<option value="Web Monkey">Web Monkey</option>
<option value="Graphic Designer">Graphic Designer</option>
<option value="Mechanic">Mechanic</option>
</datalist>
</form>
</body>
</html>
300Ribu Dapat Website
0 komentar:
Posting Komentar