整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          前端入門-html 表單控件使用

          篇介紹了表單的使用,表單有很多控件,比如輸入框,密碼框、文本域,按鈕等。按類型可分如下:

          • 輸入類控件
          • 菜單類控件

          輸入類組件 —— input

          此類控件有很多種類型,使用<input type="類型">語(yǔ)法,常見(jiàn)類型如下:

          type 值

          含義

          text

          文字字段

          password

          密碼域,用戶看不到明文,以*代替

          radio

          單選按鈕

          checkbox

          多選按鈕

          button

          普通按鈕

          submit

          提交按鈕

          reset

          重置按鈕

          image

          圖像域,用圖像作為背景的提交按鈕

          hidden

          隱藏域,不可見(jiàn)的輸入框

          file

          文本域,用于上傳文件等非文本數(shù)據(jù)

          文本輸入框和密碼框

          除了顯示形式不一樣,其它屬性一樣,有以下屬性:

          • name —— 定義文字字段名稱,用于和其它控件區(qū)別,不能包含特殊字符,也不可使用html 標(biāo)簽名稱
          • maxlength —— 定義文本框可輸入字符最大長(zhǎng)度
          • size —— 定義文本框在頁(yè)面中顯示的長(zhǎng)度
          • vaule —— 定義文本框中默認(rèn)的值

          如下是文本輸入框和密碼框制作一個(gè)登錄表單

          html代碼:

          <!DOCTYPE html>
          <html>
          <body>
          <h1>用戶登錄</h1>
          <form action="/demo/html/action_page.php">
            <label for="fname">用戶名:</label><br>
            <input type="text" id="username" name="username" value=""><br>
            <label for="lname">密碼:</label><br>
            <input type="password" id="pwsd" name="pwsd" value=""><br><br>
            <input type="submit" value="提交">
          </form> 
          </body>
          </html>

          顯示效果:

          HTML5 輸入類型

          除了以上幾種類型,HTML5 還增加了多個(gè)新的輸入類型:

          • color
          • date
          • datetime
          • datetime-local
          • email
          • month
          • number
          • range
          • search
          • tel
          • time
          • url
          • week

          如下代碼:

          <!DOCTYPE html>
          <html>
          <body>
          <form action="/demo/demo_form.asp">
            數(shù)字類型(1 到 5 之間):
            <input type="number" name="quantity" min="1" max="5">
            IE9 及早期版本不支持 type="number"。<br>
            color 選擇顏色:
            <input type="color" name="color"><br>
             生日:
            <input type="date" name="bday"><br>
            年月:
            <input type="month" name="bdaymonth"><br>
            年周:
            <input type="week" name="week_year"><br>
            時(shí)間:
            <input type="time" name="usr_time"><br>
            一定范圍
             <input type="range" name="points" min="0" max="10"><br>
             E-mail:
            <input type="email" name="email">
            能夠在被提交時(shí)自動(dòng)對(duì)電子郵件地址進(jìn)行驗(yàn)證<br>
            搜索:
            <input type="search" name="googlesearch"><br>
            電話:
            <input type="tel" name="usrtel">
            目前只有 Safari 8 支持 tel 類型。<br>
            url:
            <input type="url" name="url">
            提交時(shí)能夠自動(dòng)驗(yàn)證 url 字段<br>
            <input type="submit">
          </form>
          </body>
          </html>

          效果如下:

          單選和多選按鈕

          使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選,除了name和value屬性外,單選和多選都有一個(gè) checked屬性定義默認(rèn)選擇的項(xiàng),checked = “true”指選中那個(gè)選項(xiàng),表單會(huì)將 checked = “true” 的選型值傳遞給后臺(tái)。

          如下實(shí)例:

          <!DOCTYPE html>
          <html>
          <body>
          <h4>單選和多選</h4>
          <form action="/demo/demo_form.asp">
          水果:
          <input type="radio" name="shuiguo" value="banner" checked> 香蕉
          <input type="radio" name="shuiguo" value="apple"> 蘋(píng)果
          <br><br>
          省份:
          <input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
          <input type="checkbox" name="shengfen" value="sanxi"> 山西
          <input type="checkbox" name="shengfen" value="gdong"> 廣東
          <br><br>
          <input type="submit">
          </form> 
          </body>
          </html>

          顯示效果:

          單選和多選傳遞給后臺(tái)的數(shù)據(jù)是不一樣的,如下會(huì)看到地址欄中的數(shù)據(jù),多選會(huì)發(fā)送多個(gè)值,后臺(tái)將會(huì)獲取一個(gè)數(shù)組形式的數(shù)據(jù)。

          /demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

          普通按鈕、提交按鈕、重置按鈕

          普通按鈕:type = “button”,一般配合腳本使用,語(yǔ)法如下:

          <input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />

          value 值就是按鈕在頁(yè)面顯示的文字,onclick屬性定義了腳本事件,這里指單擊按鈕時(shí)所進(jìn)行的處理。

          如下示例:

          <!DOCTYPE html>
          <html>
          <body>
          <form>
           <input type="button" value="普通按鈕">
          <input type="button" value="打開(kāi)窗口" onclick="window.open()">
          <input type="button" value="您好" onclick="alert('您好')">
            </form>
          </body>
          </html>
          

          單擊您好按鈕

          提交按鈕:type = “submit”,用于提交表單內(nèi)容,是一種特殊按鈕。

          如剛才的登錄表單,提交后會(huì)返回結(jié)果:

          重置按鈕:type="reset",用于清除表單數(shù)據(jù),也是一種特殊按鈕。

          輸入數(shù)據(jù)

          點(diǎn)擊重置按鈕后,表單數(shù)據(jù)清空

          重置清空數(shù)據(jù)

          HTML5 按鈕

          除了使用input定義按鈕,還可以使用 html5 新增的<button> 標(biāo)簽定義按鈕,button 使用語(yǔ)法如下:

          <form action="/demo/html/action_page.php">
          <button type="button">普通按鈕</button>
          <button type="submit">提交按鈕</button>
          </form> 

          其它輸入類控件

          隱藏域 —— hidden
          文件域 —— file

          如下示例:

          <form action="/demo/html/action_page.php">
            <label for="fname">隱藏域:</label>
            <input type="hidden" id="hidden" name="hidden" value=""><br>
            <label for="lname">文件域:</label>
            <input type="file" id="file" name="file" value=""><br>
            <input type="submit" value="提交">
          </form> 

          顯示效果

          可以看到,隱藏域在頁(yè)面中不顯示,單擊文件域選擇文件按鈕可以選擇文件,比如word文件,電子表格文件等,會(huì)以非文本方式傳送到后臺(tái)的,常用來(lái)實(shí)現(xiàn)文件上傳功能。

          文本域 —— textarea

          除了input 類型的控件,還有文本域 textarea ,一種特殊的文本框,它與input 文本輸入框的區(qū)別就是可以輸入多行文字,input 文本輸入框是單行的無(wú)法輸入多行文字。

          如下示例:

          <p>textarea 元素定義多行輸入字段。</p>
          <form action="/demo/html/action_page.php">
            <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
            <br><br>
            <input type="submit">
          </form>

          效果如下:

          rows 屬性定義文本域的高度是幾行,cols 定義文本域?qū)挾日紟琢校热缟厦娑x了高10行寬30列的文本域。

          下拉菜單和多選列表

          下拉菜單作用和單選按鈕類似,只不過(guò)它更加節(jié)省空間,當(dāng)要選擇的選型很多時(shí),就不適合使用radio空間,所以當(dāng)選項(xiàng)很多的時(shí)候,使用下拉菜單,語(yǔ)法如下:

          <select name="名稱">
          <option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
          <option value="選項(xiàng)值2">選項(xiàng)3</option>
          更多option......
          </select>

          多選列表和多選按鈕類似,一樣為了節(jié)省空間,當(dāng)數(shù)據(jù)選項(xiàng)比較多時(shí),使用多選列表,語(yǔ)法如下:

          <select name="名稱" size="可看見(jiàn)的列表項(xiàng)數(shù)" multiple>
          <option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
          <option value="選項(xiàng)值2">選項(xiàng)3</option>
          更多option......
          </select>

          多選比下拉菜單不同之處是多了一個(gè)multiple屬性,定義多選的,且表現(xiàn)形式也不一樣,不是下拉而是一個(gè)列表。

          如下代碼:

          <!DOCTYPE html>
          <html>
          <body>
          <form action="/demo/demo_form.asp">
          下拉菜單:<br>
          <select name="cars">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="fiat">Fiat</option>
          <option value="audi">Audi</option>
          </select>
          <br>
          多選列表:<br>
          <select name="cars" size="3" multiple>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="fiat">Fiat</option>
          <option value="audi">Audi</option>
          </select>
          <br><br>
          <input type="submit">
          </form>
          </body>
          </html>

          顯示效果:

          這里需要注意的是,多選列表多選時(shí)需要按住ctrl鍵同時(shí)鼠標(biāo)單擊選擇才能多選,效果如下:

          到這里,已介紹了大部分的表單控件,現(xiàn)在你可以使用他們制作自己的表單,表單通常在動(dòng)態(tài)網(wǎng)站中使用,這為以后制作動(dòng)態(tài)網(wǎng)站打下基礎(chǔ)。

          還有許多屬性沒(méi)有講到,比如html5新增的一些屬性和功能,可自行參考 w3cshool 等網(wǎng)站學(xué)習(xí),感謝關(guān)注,學(xué)習(xí)愉快!

          上篇 : 前端入門——html 表單

          下篇: 前端入門 —— 網(wǎng)頁(yè)中使用窗口框架

          單標(biāo)簽



          常見(jiàn)的語(yǔ)句:

          form:表單標(biāo)簽格式

          作用:用來(lái)收集用戶輸入信息如:登入、注冊(cè)、搜索商品等
          action:開(kāi)始網(wǎng)址
          method:get和post等等
          text (明文):用戶名格式
          password :(密文)密碼
          radio :?jiǎn)芜x框 性別格式 性別是單選,單選類型是radio,注意name要加上sex
          checkbox:復(fù)選框
          textarea:文本框
          file:上傳文件
          select:下拉選擇框
          button:按鈕
          reset:重置
          submit:提交

          詳解:




          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="UTF-8">

          <title>表單標(biāo)簽</title>

          </head>

          <body>

          <form action="https://hao.360.com/" method="post">

          <p>賬號(hào):<input type="text" /></p>

          <p>密碼:<input type="password" /></p>

          <p>

          <input type="radio" name="sex" id="" />男

          <input type="radio" name="sex" id="" />女

          </p>

          <p>

          <input type="checkbox" name="" id="" value="" />linux

          <input type="checkbox" name="" id="" value="" />mysql

          <input type="checkbox" name="" id="" value="" />html

          <input type="checkbox" name="" id="" value="" />python

          </p>

          <p>學(xué)歷

          <select name="">

          <option value="">請(qǐng)選擇學(xué)歷</option>

          <option value="">小學(xué)</option>

          <option value="">初中</option>

          <option value="">高中</option>

          <option value="">大學(xué)</option>

          </select>

          </p>

          <p>自我介紹:<br />

          <textarea name="" rows="10" cols="30"></textarea>

          </p>

          <input type="reset" value="重置"/>

          <input type="submit" value="提交"/>

          <input type="button" value="按鈕"/>

          </form>

          </body>

          </html>

          TML:完成頁(yè)面的內(nèi)容展示

          CSS:完成頁(yè)面樣式的控制,美化頁(yè)面,完成頁(yè)面的布局。

          表單:用于采集用戶輸入的數(shù)據(jù)。用于和服務(wù)器進(jìn)行交互。

          form:用于定義表單的。可以定義一個(gè)范圍(代表用戶采集數(shù)據(jù)的范圍)

          屬性:action:指定提交數(shù)據(jù)的url(指的就是把數(shù)據(jù)提交到哪里)

          method:指定提交方式

          分類:一共有7種,2種比較常用。

          get:1.請(qǐng)求參數(shù)會(huì)在地址欄顯示

          2.請(qǐng)求參數(shù)的長(zhǎng)度是有限制的。

          3.請(qǐng)求不安全

          post:1.請(qǐng)求參數(shù)不會(huì)在地址欄顯示,會(huì)封裝在請(qǐng)求體中。

          2.請(qǐng)求參數(shù)的長(zhǎng)度沒(méi)有限制

          3.較為安全

          表單里面的數(shù)據(jù)要想被提交,必須指定它的name屬性

          表單項(xiàng)標(biāo)簽

          input:可以通過(guò)type屬性值,改變?cè)卣故镜臉邮健?/p>

          type屬性:text:文本輸入框,默認(rèn)值

          placeholder:指定輸入框的提示信息,當(dāng)輸入框的內(nèi)容發(fā)生變化,會(huì)自動(dòng)情況提示信息。

          password:密碼輸入框

          radio:1.單選框(要想讓多個(gè)單選框?qū)崿F(xiàn)單選的效果,則多個(gè)單選框的name屬性值必須一樣)

          2.一般會(huì)給每一個(gè)單選框提供value屬性,指定其被選中后提交的值。

          3.checked屬性可以指定默認(rèn)值

          checkbox:復(fù)選框:

          1.一般會(huì)給每一個(gè)單選框提供value屬性,指定其被選中后提交的值。

          2.checked屬性可以指定默認(rèn)值

          file:文件選擇框

          hidden:隱藏域,用于提交一些信息

          按鈕:

          submit:提交按鈕。可以提交表單

          button:普通按鈕

          image:圖片提交按鈕

          src屬性指定圖片的路徑

          label:指定輸入項(xiàng)的文字描述信息

          注意:lable的for屬性一般會(huì)和input的id屬性值對(duì)應(yīng)。如果對(duì)應(yīng)了,點(diǎn)擊lable區(qū)域,會(huì)讓input輸入框獲取焦點(diǎn)。


          select:下拉列表

          子元素:option,指定列表項(xiàng)

          textarea:文本域


          主站蜘蛛池模板: 国产一区二区三区美女| 狠狠综合久久AV一区二区三区| 激情一区二区三区| 日韩免费观看一区| 亚洲一区二区三区四区视频| 乱码精品一区二区三区| 亚洲高清毛片一区二区| 国产福利一区二区| 性无码一区二区三区在线观看| 久久久久人妻一区精品性色av| 欧美日韩精品一区二区在线观看| 一区二区三区电影网| 无码精品国产一区二区三区免费 | 国产精品被窝福利一区 | 最新中文字幕一区| 不卡无码人妻一区三区音频| 一区二区三区亚洲| 日韩美女在线观看一区| 亚洲综合av永久无码精品一区二区| 91久久精品无码一区二区毛片| 日本一区二区三区在线视频| 一区二区三区视频在线观看| 午夜无码一区二区三区在线观看| 久久精品亚洲一区二区三区浴池| 精品久久久久久中文字幕一区| 手机看片福利一区二区三区| 国产微拍精品一区二区| 亚洲国产精品一区第二页| 香蕉久久ac一区二区三区| 无码日韩精品一区二区三区免费| 爱爱帝国亚洲一区二区三区 | 一区免费在线观看| 日韩一区二区三区视频| 亚洲AV乱码一区二区三区林ゆな| 亚洲国产精品一区二区第一页 | 一区二区三区亚洲| 精品视频一区二区三区四区| 国产精品一区二区综合| 国产日韩AV免费无码一区二区三区 | 男女久久久国产一区二区三区| 3d动漫精品成人一区二区三|