HTML5 Forms, Part 1 part 3

HTML Fundamentals
HTML5
HTML5 Forms, Part 1
24
3/3
         

Forms with Required Fields



The "required" attribute is used to make the input elements required.
<form autocomplete="off">
<label for="e-mail">Your e-mail address: </label>
<input name="Email" type="text" required />
<input type="submit" value="Submit"/>
</form>Try It Yourself

The form will not be submitted without filling in the required fields.

Result:
The autocomplete attribute specifies whether a form or input field should have autocomplete turned on or off.
When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

HTML5 added several new input types:
- color
- date
- datetime
- datetime-local
- email
- month
- number
- range
- search
- tel
- time
- url
- week

New input attributes in HTML5:
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
Input types that are not supported by old web browsers, will behave as input type text.

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