手工SEO

手工SEO首頁 帝國教程 正文

Html5第五課智能的表單應用

手工SEO 2020-02-29 16:22:23 帝國教程 143℃ 手工SEO
      網站制作中經常用到表單提交數據,在html5中,對表單做了很多優化,使我們在用表單時更加方便快捷。下面就說一下,html5的表單特點。

一、便于排版的From表單 1、XHTML或者HTML4.01中from和其中的表單標簽(input、textarea、select、button)必須嵌套使用,即所有標簽需要放到<form></form>之間才能使用,如下面的代碼:
<form action="" method="post">
         <input  type="text" name="user" />
         <select name="year">
                   <option value="1999"></option>
         </select>
         <textarea name="ext" ></textarea>
         <button type="submit">提交</button>
</form>
2、HTML5中為了方便排版,可以使from中的表單標簽脫離from的嵌套。方法:from指定ID,所有表單標簽均添加from=id屬性。 即表單標簽中只要有form的id,那么該標簽就是屬于這個form表單的。如下面代碼:
<form action="" method="post" id="register" >
</form>
         <input  type="text" name="user" form="register" />
         <select name="year" form="register" >
                   <option value="1999"></option>
         </select>
         <textarea name="ext" form="register" ></textarea>
         <button type="submit" form="register" >提交</button>
 
二、智能表單的使用和規范 1、Form表單中新增加了很多input的type屬性值,使得input的功能更易用、強大。
 
新增的input的type屬性值如下:
Type="email"    限制用戶輸入必須為Email類型
Type="url"      限制用戶輸入必須為URL類型
Type="date"     限制用戶輸入必須為日期類型
Type="time"     限制用戶輸入必須為時間類型O
Type="month"   限制用戶輸入必須為月類型O
Type="week"    限制用戶輸入必須為周類型O
Type="number"  限制用戶輸入必須為數字類型
Type="range"    產生一個滑動條的表單
Type="search"   產生一個搜索意義的表單 配合results="n"屬性 C
Type="color"    生成一個顏色選擇表單
 
2、新增的表單屬性
屬性         值          說明
Required     required     表單擁有該屬性表示其內容不能為空,必填
placeholder   提示文本    表單的提示信息,存在默認值將不顯示
Autofocus    autofocus    自動聚焦屬性,頁面加載完成自動聚焦到指定表單
Pattern      正則表達式  輸入的內容必須匹配到指定正則
 
3、Autocomplete列表
Datalist標簽配合option標簽實現的自動填充表單功能:
 
代碼如下:
<input type="search" name="move" list="search" >
<datalist id="search" >
         <option>黑老師的由來</option>
         <option>男人緣何腎虛</option>
         <option>佳佳婕婕不得不說的故事</option>
</datalist>
 
效果圖:

Html5第五課智能的表單應用


4、output的使用
<form oninput="res.value=no1.value*no2.value“ >
         <input type="text" name="no1">
         <input type="text" name="no2">
         <output name="res"></output>
</form>

上一篇:Html5第九課新增的CSS3的邊框屬性

下一篇:在網站中添加QQ在線聊天按鈕

網站分類
標簽列表
德甲排行榜 网上游戏棋牌手机版下载 闲来麻将app下载 浙江快乐彩12选5开奖结果 贵阳麻将捉鸡 新疆35选7的中奖规则 陕西麻将转嘴子怎么玩 街机无限金币破解捕鱼 516棋牌官网 海南琼崖麻将2019最新版 股票沪市大盘行情 全民网赚论坛 全民欢乐捕鱼外挂 内蒙古星悦麻将下载 甘肃十一选五开将结 5分彩选号技巧 吉林快3和值推荐