08-表單

本節(jié)案例

image.png

表單的作用

HTML 表單用于收集用戶輸入。

表單form

<form> 元素定義 HTML 表單免钻,里面需要有各種表單元素
實(shí)例:

<form action="login.php" method="post">
      姓名: <input type="text" name="name" value="Mickey" placeholder="請(qǐng)輸入用戶名">
      <br>
      密碼: <input type="password" name="password" value="Mouse">
      <br><br>
     <input type="submit" value="登錄">
 </form> 
 <p>如果您點(diǎn)擊提交莫秆,表單數(shù)據(jù)會(huì)被發(fā)送到名為login.php的頁(yè)面。</p>
image.png

代碼解析:

  • form里面需要各種表單元素催什,如<input>涵亏、<textarea>等。form常見屬性與屬性值有:
    • method:方法蛆楞,用于規(guī)定在提交表單時(shí)所用的 HTTP 方法溯乒。 method = get(默認(rèn)) | post |…… , 字面意思用于獲取和傳輸。當(dāng)然豹爹,他們還有很多其它的差別裆悄,當(dāng)您使用 get時(shí),表單數(shù)據(jù)在頁(yè)面地址欄中是可見的,如表單提交是被動(dòng)的(比如搜索引擎查詢),并且沒有敏感信息可以用get校仑。post的安全性更好程帕,因?yàn)樵陧?yè)面地址欄中被提交的數(shù)據(jù)是不可見的杨赤。如果表單正在更新數(shù)據(jù),或者包含敏感信息(例如密碼)可以用post。
    • action:動(dòng)作,用于規(guī)定提交表單的目的地冰垄。如action="banzhang.php"則將表單提交給banzhang.php來處理,如果值為空权她,則默認(rèn)是本頁(yè)虹茶。
    • 其它屬性:enctype(編碼方式)、target(目標(biāo)打開方式)等等隅要。
  • input是最常見的表單元素蝴罪,可以提供用戶一個(gè)輸入界面。<input> 元素根據(jù)不同的 type 屬性步清,可以變化為多種形態(tài)要门。常見屬性與屬性值有:
    • type = text (默認(rèn)) | password | radio | checkbox | file | image | hidden ,分別表示:文本框(默認(rèn))| 密碼 | 單選 | 復(fù)選 | 文件框 | 圖像域 | 隱藏域
    • name 廓啊,表單元素的名字欢搜,通常是必備屬性。
    • value 谴轮,表單元素的值狂巢,通常根據(jù)需求來決定表單元素內(nèi)是否有value屬性和對(duì)應(yīng)的值。
    • placeholder 书聚,表單元素占位符唧领,當(dāng)表單元素value為空時(shí)顯示其值,不為空時(shí)隱藏其值雌续。是一個(gè)html5新增屬性斩个。
    • tabindex ,設(shè)置訪問者在頁(yè)面中按tab鍵的順序驯杜。 在沒有定義屬性值的時(shí)候受啥,tabindex的默認(rèn)值是0。如果將tabindex設(shè)為負(fù)值(tabindex=”-1”)鸽心,這個(gè)元素會(huì)被排除在tab鍵切換的范圍之外滚局。tabindex不僅可以用于輸入框間的切換,也可以用于鏈接之間的切換顽频。
    • 其它屬性:checked(單選復(fù)選框默認(rèn)是否選中)藤肢、disabled(不可用,常用于按鈕)糯景、maxlength(文本框最大字符數(shù))嘁圈、size(元素寬度或高度) 、readonly(內(nèi)容只讀) 蟀淮。

常見表單元素的示例圖:

image.png

注意:
1.html5新增input的form屬性最住,用于指向特定form表單的id,實(shí)現(xiàn)input無(wú)需放在form標(biāo)簽之中怠惶,即可通過表單進(jìn)行提交涨缚。同時(shí)還新增了按鈕的formaction屬性,動(dòng)態(tài)的讓表單提交到不同的URL策治。

  <form id="foo" method="post"></form>
  <input name="name"  form="foo" >
  <input type="password" name="password"   form="foo" >
  <input  type="submit" value="注冊(cè)"  form="foo"   formaction="reg">
  <input  type="submit" value="登錄"  form="foo"   formaction="log">

2.html5中新增了type屬性值:email脓魏、URL、datetime览妖、datetime-local轧拄、date、month讽膏、week檩电、time、number府树、range俐末、color 、search奄侠、tel等
3.html5中新增屬性:

  • Autocomplete:自動(dòng)完成功能.記錄用戶之前輸入的內(nèi)容卓箫,并在下次輸入時(shí)自動(dòng)提示完成輸入。屬性值: on | off垄潮,既可以在form表單上使用烹卒,對(duì)整張表單的所有控件進(jìn)行自動(dòng)完成的開關(guān)闷盔,也可以在input上使用,對(duì)特定輸入框進(jìn)行修改旅急。絕大部分瀏覽器逢勾,默認(rèn)值是on(開啟)。
  • Autofocus:自動(dòng)獲得焦點(diǎn). autofocus="autofocus",只能設(shè)置input元素自動(dòng)獲得焦點(diǎn)藐吮。
  • Form:所屬表單溺拱。通過form表單的id,確定此input對(duì)應(yīng)哪張表單谣辞。
  • Required:意為必填迫摔。required="required" 設(shè)置input必填,否則阻止提交泥从。
  • Pattern:使用正則表達(dá)式驗(yàn)證input的模式(須了解正則表達(dá)式)
<p>正則表單式用法示例:</p>
<form>
    手機(jī)號(hào):<input type="text" name="tel" pattern="1[0-9]{10}">
    <input type="submit">   
</form>

需要注意的表單元素用法

單選按鈕 radio:

  • 同組radio的name屬性的值必須相同句占,此時(shí)實(shí)現(xiàn)只能單選效果(“互斥”)。
  • 為更好的鼠標(biāo)體驗(yàn)及方便以后的CSS實(shí)現(xiàn)歉闰,實(shí)際中通常使用lable for id的用法辖众。
 性別:
  <input type="radio" id="sex_male" name="sex" value="male">
  <label for="sex_male">男</label>
  <input type="radio" id="sex_female" name="sex" value="female">
  <label for="sex_female">女</label>
  <!--name相同,只能選男或女和敬;有了label for id凹炸,文字和表單元素捆在一起,單擊文字可以等同于單擊表單元素昼弟,注所有表單元素都可以通過label綁定-->

復(fù)選按鈕 radio:

  • 同組radio的name屬性的值必須相同啤它。
  • 為更好的鼠標(biāo)體驗(yàn)及方便以后的CSS實(shí)現(xiàn),實(shí)際中也通常使用label for id的用法舱痘。
  • 注: label也可顯式關(guān)聯(lián)文本变骡,即用label包括input和文本。
愛好:
<input type="checkbox" id="f_basketball" name="favorites" value="basketball">
<label for="f_basketball">籃球</label>
<input type="checkbox" id="f_football" name="favorites" value="football">
<label for="f_football">足球</label>
<label>
      <input type="checkbox" name="favorites" value="volleyball">排球
</label>

其它表單元素

下拉列表select

select元素定義下拉列表芭逝,option元素定義待選擇的選項(xiàng)塌碌。

 <select name="cars" size="4" multiple> <!-- size = 4 表示下拉列表尺寸為4,multiple 表示可多選 -->
   <option value="volvo" selected>Volvo</option>
   <option value="bmw">BMW</option>
   <option value="benz">Benz</option>
   <option value="audi">Audi</option>
 </select>

 <select name="cars" size="4" multiple>
    <optgroup label="IE系列">  <!--  optgroup對(duì)下拉列表進(jìn)行分組 -->
      <option value="Internet Explorer">IE6</option>
      <option value="Internet Explorer">IE7</option>
      <option value="Internet Explorer">IE8</option>
      <option value="Internet Explorer">IE9.0及以上</option>
  </optgroup> 
  <optgroup label="非IE系列">  <!--  optgroup對(duì)下拉列表進(jìn)行分組 -->
     <option value="Firefox">BMW</option>
     <option value="Chrome">BMW</option>
     <option value="Opera">BMW</option>
     <option value="Safari">BMW</option>
  </optgroup> 
</select>
image.png

文本域 textarea

textarea元素定義多行輸入字段(文本域):

<textarea name="message" rows="10" cols="30" placeholder="請(qǐng)輸入您的留言旬盯!">
   您的留言很寶貴台妆!
 </textarea>

按鈕button

button 元素定義可點(diǎn)擊的按鈕。

<button type="button" onclick="alert('Hello World!')">Click Me!</button>
  • 在 button 元素內(nèi)部胖翰,可以放置文本或圖像接剩。這是<button>與使用 input 元素創(chuàng)建的按鈕的不同之處。
  • 二者相比較萨咳, <button> 控件提供了更為強(qiáng)大的功能和更豐富的內(nèi)容懊缺。<button> 與 </button> 標(biāo)簽之間的所有內(nèi)容都是按鈕的內(nèi)容,其中包括任何可接受的正文內(nèi)容培他,比如文本或多媒體內(nèi)容鹃两。例如遗座,我們可以在按鈕中包括一個(gè)圖像和相關(guān)的文本,用它們?cè)诎粹o中創(chuàng)建一個(gè)吸引人的標(biāo)記圖像俊扳。
  • 唯一禁止使用的元素是圖像映射员萍,因?yàn)樗鼘?duì)鼠標(biāo)和鍵盤敏感的動(dòng)作會(huì)干擾表單按鈕的行為。
  • 請(qǐng)始終為按鈕規(guī)定 type 屬性:Internet Explorer 的默認(rèn)類型是 "button"拣度,而其他瀏覽器中(包括 W3C 規(guī)范)的默認(rèn)值是 "submit"。

HTML5 表單元素

HTML5 增加了如下表單元素:

  • <datalist>
  • <keygen>
  • <output>

<datalist> 元素為 <input> 元素規(guī)定預(yù)定義選項(xiàng)列表螃壤。用戶會(huì)在他們輸入數(shù)據(jù)時(shí)看到預(yù)定義選項(xiàng)的下拉列表抗果。
<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性。簡(jiǎn)單的記憶:[input] list for [datalist] id奸晴。

<input list="browsers" name="browser">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">

<p><b>注釋:</b>Safari 或 IE9(以及更早的版本)不支持 datalist 標(biāo)簽冤馏。</p>

當(dāng)輸入內(nèi)容或點(diǎn)擊三角形按鈕時(shí)會(huì)出現(xiàn)提示


image.png

作業(yè):

1.利用表格本節(jié)所學(xué)的表單知識(shí)完成本節(jié)開頭的表單項(xiàng)目(*必填用required屬性)
2.完成如下練習(xí):

注意:html5新增表單元素是用filedset配合legend實(shí)現(xiàn)的
image.png

練習(xí)2參考代碼:
  <form action="Test.html" method="get">
    <fieldset>
        <legend>HTML5新增表單元素</legend>
        <table>
            <tr>
                <td>郵箱</td>
                <td><input type="email" name="email"></td>
            </tr>
            <tr>
                <td>地址</td>
                <td><input type="url" name="url"></td>
            </tr>
            <tr>
                <td>日期</td>
                <td><input type="date" name="data"></td>
            </tr>
            <tr>
                <td>時(shí)間</td>
                <td><input type="time" name="time"></td>
            </tr>
            <tr>
                <td>月份</td>
                <td><input type="month" name="month"></td>
            </tr>
            <tr>
                <td>星期</td>
                <td><input type="week" name="week"></td>
            </tr>
            <tr>
                <td>滑動(dòng)條</td>
                <td><input type="range" name="range"></td>
            </tr>
            <tr>
                <td>顏色</td>
                <td><input type="color" name="color"></td>
            </tr>
            <tr>
                <td><input type="submit"></td>
            </tr>
        </table>
    </fieldset>
</form>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市寄啼,隨后出現(xiàn)的幾起案子逮光,更是在濱河造成了極大的恐慌,老刑警劉巖墩划,帶你破解...
    沈念sama閱讀 222,865評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件涕刚,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡乙帮,警方通過查閱死者的電腦和手機(jī)杜漠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來察净,“玉大人驾茴,你說我怎么就攤上這事∏饪ǎ” “怎么了锈至?”我有些...
    開封第一講書人閱讀 169,631評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)译秦。 經(jīng)常有香客問我峡捡,道長(zhǎng),這世上最難降的妖魔是什么诀浪? 我笑而不...
    開封第一講書人閱讀 60,199評(píng)論 1 300
  • 正文 為了忘掉前任棋返,我火速辦了婚禮,結(jié)果婚禮上雷猪,老公的妹妹穿的比我還像新娘睛竣。我一直安慰自己,他們只是感情好求摇,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評(píng)論 6 398
  • 文/花漫 我一把揭開白布射沟。 她就那樣靜靜地躺著殊者,像睡著了一般。 火紅的嫁衣襯著肌膚如雪验夯。 梳的紋絲不亂的頭發(fā)上猖吴,一...
    開封第一講書人閱讀 52,793評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音挥转,去河邊找鬼海蔽。 笑死,一個(gè)胖子當(dāng)著我的面吹牛绑谣,可吹牛的內(nèi)容都是我干的党窜。 我是一名探鬼主播,決...
    沈念sama閱讀 41,221評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼借宵,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼幌衣!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起壤玫,我...
    開封第一講書人閱讀 40,174評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤豁护,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后欲间,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體楚里,經(jīng)...
    沈念sama閱讀 46,699評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評(píng)論 3 343
  • 正文 我和宋清朗相戀三年括改,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了腻豌。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,918評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡嘱能,死狀恐怖吝梅,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情惹骂,我是刑警寧澤苏携,帶...
    沈念sama閱讀 36,573評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站对粪,受9級(jí)特大地震影響右冻,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜著拭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評(píng)論 3 336
  • 文/蒙蒙 一纱扭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧儡遮,春花似錦乳蛾、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)蹂随。三九已至,卻和暖如春因惭,著一層夾襖步出監(jiān)牢的瞬間岳锁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工蹦魔, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留激率,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,364評(píng)論 3 379
  • 正文 我出身青樓勿决,卻偏偏與公主長(zhǎng)得像柱搜,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子剥险,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,762評(píng)論 1 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理宪肖,服務(wù)發(fā)現(xiàn)表制,斷路器,智...
    卡卡羅2017閱讀 134,719評(píng)論 18 139
  • 本人做php的,最近發(fā)現(xiàn)JS真的是博大精深啊,比PHP難.在HTML中控乾,表單是由form元素來表示的么介,但是在jav...
    linfree閱讀 2,172評(píng)論 3 17
  • form簡(jiǎn)介 是HTML中的一個(gè)元素,它表示文檔中的一個(gè)區(qū)域蜕衡,這個(gè)區(qū)域包含了交互控件壤短,用于向web服務(wù)器提交信息。...
    七里之境閱讀 1,333評(píng)論 0 1
  • The two most imporlant days in your life are the day you ...
    5d0ca103ab37閱讀 816評(píng)論 0 0