HTML5 form and Document learning notes

1. New elements

Form properties: Specify the form so that the book elements within the form can be written in any location

<form id="testform" >    <input type="text" ></form><textarea form= "testform" ></textarea>        

FormAction Properties: Click on a different button to submit the form to a different page

<form id="Textform"action="sever.jsp"> <input type="Submit"Name="S1"Value="v1"formaction="s1.jsp">Submit to S1<input type="Submit"Name="S2"Value="v2"formaction="s2.jsp">Submit to S2<input type="Submit"Name="S3"Value="v3"formaction="s3.jsp">Submit to S3<input type="Submit"></form>

FormMethod Property: Specify the submission method

<form id="Teatform"action="serve.jsp"> <input type="Submit"Name="S1"Value="v1"formaction="s1.jsp"Formmethod="Post">Submit to S1<input type="Submit"Name="S2"Value="v2"formaction="s2.jsp"Formmethod="Get">Submit to S2<input type="Submit"></form>

Placeholder properties: Display input prompt

<input type="text" placeholder="input me">

Autofocus property: Auto-Get focus

<input type="text" autofocus>

List property: Displays the listing as a hint after getting the focus

Text:<input type="text"Name="Greeting"list="Greetings"><datalist id="Greetings"style="Display:none;"> <option value="Good Morning">good morning</option> <option value="Hello">Hello</option> <option value="Good afternoon">good afternoon</option></datalist>

AutoComplete properties: Automatically display alternate data

<input type="text" name="greeting" autocomplete= "  on" list="greeting">

2. INPUT element
URL type: A text box specifically used to enter a URL address.

<input name="url " type="url " value="http// www.microsoft.com">

Email type: A text box specifically designed to enter an email address

<input type="email " name="email" value="[ Email protected]">

Date type: Easy to enter in calendar format

<input type="date" name="date1" value= " 2010-10-02">

Time Type: Dedicated to entering the Times

<input type="Time" name="time1" value= " 10:00am">

DateTime type: A text box that is specifically used to enter UTC time to submit an automatic validation check.

<input type="datetime" name="datetime1">

Datetime-local type: A text box dedicated to entering local time

<input type="datetime-local" name="datetime-local1">

Month Type: dedicated to enter month

<input type="month" name="month1" value= " 2010-10">

Week Type: A text box that specifically enters the week number

<input type="week" name="week1 " value="2010 -w40">

Number type: A text box dedicated to entering numbers

<input type="number" name="number1" value= "  "min="max= "step="   "5">

Range type;

<input type="range " name="range1" value="25   "min=" max= "step= "   5">

Search Type: Enter keywords specifically

Input[type="search"] {-website-appearance:textfield;}

Tel Type: Enter phone number specifically

Color type: specifically Color-selected

HTML5 form and Document learning notes