HTML5 Forms, Part 1 part 2

New Attributes



HTML5 has introduced a new attribute called placeholder. On <input> and <textarea>elements, this attribute provides a hint to the user of what information can be entered into the field.
<form>
<label for="email">Your e-mail address: </label>
<input type="text" name="email" placeholder="email@example.com" />
</form>Try It Yourself

Result:
The autofocus attribute makes the desired input focus when the form loads:
<form>
<label for="e-mail">Your e-mail address: </label>
<input type="text" name="email" autofocus/>
</form>Try It Yourself

Result:
The required attribute tells the browser that the input is required.

Comments

Post a Comment

Popular posts from this blog

Drag&Drop API

Making Elements Draggable The drag and drop feature lets you "grab" an object and drag it to a different location. To make an element draggable, just set the  draggable  attribute to true: <img draggable =" true " /> Any HTML element can be draggable. The API for HTML5 drag and drop is event-based. Example: <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="box" ondrop ="drop(event)" ondragover ="allowDrop(event)" style="border:1px solid black; width:200px; height:200px"></div> <img id="image" src="sample...
Read more