HTML5 new label and a new form properties ---- + ---- New property Integrated Case 1

HTML5 and features a new label

Compatibility Issues (version than ie9)

Document type setting

• document
  • HTML: sublime import html: 4s
  • XHTML: sublime input html: xt
  • HTML5 sublime input html: 5! <! DOCTYPE html>

Character set

• <Meta http-equiv = "charset" content = "utf-8">: HTML and XHTML suggested this to write
• <Meta charset = "utf-8">: HTML5 tags such proposed to write

Common new label

w3c manual Chinese official website: http://w3school.com.cn/ 

• header: header header definition document

• nav: part of the definition of navigation links

• footer: footer defined in bottom of the document or section

• article: defined article.

• section: define the document section (section, section)

• aside: define the content of the content which it is located outside the side

  <header> 语义 :定义页面的头部  页眉</header> <nav> 语义 :定义导航栏 </nav> <footer> 语义: 定义 页面底部 页脚</footer> <article> 语义: 定义文章</article> <section> 语义： 定义区域</section> <aside> 语义： 定义其所处内容之外的内容 侧边</aside> 

  ​

• datalist tag defines a list of options. Please input element used in conjunction with this element

  < The INPUT of the type = "text" value = "enter Star" List = "Star" /> 
      < the DataList the above mentioned id = "Star" > 
          < the Option value = "Andy" > Andy </ the Option > 
          < the Option value = "Rene" > Rene </ Option > 
          < Option value = "Liu" > Liu </ Option > 
          < Option value = "Qi Wei" >Qi Wei </ Option > 
          <Option value = "Qi" > Qi </ Option > 
      </ DataList >

   

  ​

• fieldset element within the associated form elements can be grouped, packaged with the use of legend

  <fieldset>
      		<legend>用户登录</legend> 标题 用户名: <input type="text"><br /><br /> 密　码: <input type="password"> </fieldset> 

  ​

The new input type value of the property:

Types of****	Example of use ****	meaning****
email****	<input type="email">	Enter your e-format
tel****	<input type="tel">	Enter the phone number format
url****	<input type="url">	Enter the url format
number****	<input type="number">	Enter the digital format
search****	<input type="search">	Search Box (reflect semantic)
range****	<input type="range">	Drag the slider free
time****	<input type="time">	Hours minutes
date****	<input type="date">	date
datetime****	<input type="datetime">	time
month****	<input type="month">	Month Year
week****	<input type="week">	The week of

 

Common new property

Attributes****	usage****	meaning****
placeholder****	<Input type = "text" placeholder = "Please enter your user name">	When the user enters the placeholder text disappears inside delete all text, automatically return
autofocus****	<input type="text" autofocus>	Provisions when the page loads input element should automatically get focus
multiple****	<input type="file" multiple>	Multiple file uploads
autocomplete****	<input type="text" autocomplete="off">	Whether the provisions of the form should enable the AutoComplete feature has two values, one is on a value 1.autocomplete is off on behalf of records that have been entered first need to submit button 2. The form you have to give his name
required****	<input type="text" required>	Required fields can not be empty
accesskey****	<input type="text" accesskey="s">	Predetermined activation (so the element has the focus) element using shortcut alt + s of the form

 

Integrated Case

    < Form Action = "" > 
        < fieldset > 
            < Legend > Student Records </ Legend > 
            < label for = "userName" > Name: </ label > 
            < the INPUT of the type = "text" name = "userName" the above mentioned id = "userName" placeholder = "Please enter your user name" >  < br > 
            < label for = "USERPHONE" > phone number: </label>
            <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
            <label for="email">邮箱地址:</label>
            <input type="email" required name="email" id="email"><br>
            <label for="collage">所属学院:</label>
            <input type="text" name="collage" id="collage"List = "CLIST" placeholder = "select" > < br > 
            < DataList ID = "CLIST" > 
                < Option value = "Mobile Development Institute distal end" > </ Option > 
                < Option value = "Java INSTITUTE" > </ the Option > 
                < the Option value = "c ++ College" > </ the Option > 
            </ the DataList > < br > 
            < label for = "score" > Admission results:</label>
            <input type="number" max="100" min="0" value="0" id="score"><br>
            <label for="inTime">入学日期:</label>
            <input type="date" id="inTime" name="inTime"><br>
            <label for="leaveTime">毕业日期:</label>
            <input type="date" id="leaveTime" name= "leaveTime" > < br > 
            < the INPUT of the type = "the Submit" > 
        </ fieldset > 
    </ form > 


    < form Action = "" > 
        < fieldset > 
            < Legend > student records Smecta </ Legend > 
            < label > Name : < the iNPUT of the type = "text" placeholder = "enter student name" /> </ label >  < br /> <br />
            <label>手机号: <input type="tel" /></label> <br /><br />
            <label>邮箱: <input type="email" /></label> <br /><br />
            <label>所属学院:  <input type="text" placeholder="请选择学院" list="xueyuan"/>
            <datalist id="xueyuan">
                <option>java College </ the Option > 
                < the Option > front-end college </ the Option > 
                < the Option > PHP Institute </ the Option > 
                < the Option > School of Design </ the Option > 
            </ the DataList > 
            < br /> < br /> 
                
            < label > Date of Birth :    < INPUT type = "DATE"  /> </ label >  < br /> < br /> 
            <label > results:  <input type="number" /></label> <br /><br />
            <label>毕业时间:  <input type="date" /></label> <br /><br />
            <input type="submit" />  <input type="reset" />
        </fieldset>
    </form>