<input> Tag Examples
Examples of the input
tag in HTML 5
Input field with placeholder text and autofocus on input field in HTML form
(see input demo above)
<p style="text-align: right"> <label for="ex1lang">Current language:</label> <select id="ex1lang" form="#ex1form"> <option value="en" selected="selected">English</option> ... </select> </p> ... <form id="ex1form"> <style scoped="scoped"> input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-family: Verdana; color: #006633; font-style: italic } input:-moz-placeholder, textarea:-moz-placeholder { font-family: Verdana; color: #006633; font-style: italic } </style> <fieldset> <legend>Login credentials</legend> <label for="ex1user">Username:</label> <input id="ex1user" name="username" required="required" autofocus="autofocus" size="30" maxlength="15" placeholder="Your username" /><br/> <label for="ex1pass">Password: </label> <input id="ex1pass" name="password" required="required" type="password" size="30" maxlength="15" placeholder="Your password" /> </fieldset> <fieldset> <legend>Contact information</legend> <label for="ex1addr">Email address:</label> <input id="ex1addr" name="emailaddr" required="required" type="email" size="60" maxlength="80" placeholder="Your e-mail address" /><br/> <label for="ex1site">Web address: </label> <input id="ex1site" name="siteurl" required="required" type="url" size="60" maxlength="80" placeholder="Your web site URL" /> </fieldset> <label for="ex1date">Date:</label> <input id="ex1date" name="date" type="date"/>   <label for="ex1age1">Age:</label> <input id="ex1age1" type="range" min="18" max="99" value="25" onchange="document.getElementById('ex1age2').value = this.value" /> <input id="ex1age2" size="3" value="25" onchange="if (this.value < 18) this.value = 18; if (this.value > 99) this.value = 99; document.getElementById('ex1age1').value = this.value" /> </form>
Since the Current language
field is outside the HTML form, it is associated with the form with a form
attribute.
The "username" field is a type="text"
input field by default.
WebKit (which is used by Chrome) ignores CSS styles which have a selector that it does not recognize, even if the other CSS selectors are valid. Therefore, the CSS style for the placeholder attributes must be duplicated for Chrome and Firefox because following CSS code does not work:
<style scoped="scoped"> input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, input:-moz-placeholder, textarea:-moz-placeholder { font-family: Verdana; color: #006633; font-style: italic } </style>