表單

• 表單概述
• • 表單簡介
  • • form 標(biāo)簽
• 輸入標(biāo)簽
• • 文本框
  • • 語法格式
  • 單選框和復(fù)選框
  • • 語法格式
  • 按鈕
  • • 語法格式
  • 圖像域和文件域
  • • 語法格式
  • 文本域
  • • 語法格式
  • 菜單/列表
  • • 語法格式

表單概述

表單在網(wǎng)頁中經(jīng)?？梢?#xff0c;基本上所有的需要提交收集信息的網(wǎng)站都需要用到表單，最常見的就是各種網(wǎng)站的登錄頁面，一個登陸頁面最主要的就是各種表單元素的收集，表單主要使用form標(biāo)簽來完成

表單簡介

表單通常設(shè)計(jì)在HTML中，當(dāng)用戶按照提示信息填寫完成后，瀏覽器通將信息提交到后臺服務(wù)器上，經(jīng)過服務(wù)器的處理驗(yàn)證后，再將用戶需要的信息傳回，這樣就完成一個交互。

表單在這里最主要的功能就是收集信息，具體來說是收集瀏覽者的信息，例如各種登錄界面，篩選，搜索等模塊，在表單元素中，最常用的就是文本框、密碼框、單選按鈕、復(fù)選框等

舉例，大學(xué)慕課的登錄頁面：

form 標(biāo)簽

表單是html頁面中的某個區(qū)域，而這個區(qū)域有form標(biāo)簽進(jìn)行劃分，form是雙標(biāo)簽，所有的表單元素和必要的提示信息，都必須寫在form標(biāo)簽中。語法格式如下：

<form action="" name="" method="" enctype="" target="">用戶名：<input type="text" value="">密碼：<input type="password"></form>

在form標(biāo)簽中還可以設(shè)置表單的基本屬性，包括表單的名稱、處理程序、傳送方式等，各屬性值含義如下：

form屬性含義說明

action	表單的處理程序，即收到表單后需要傳送到什么地址	這個地址可以是絕對地址，也可以是相對地址，也可以是E-mail郵箱地址
name	表單的名稱	防止后臺多個表單互相錯亂，表單名稱最好與實(shí)際作用有關(guān)
method	處理程序從表單中獲取信息的方式，有g(shù)et（默認(rèn)）和post兩個值	get方式會被視為CGI或者ASP的參數(shù)發(fā)送 post方法指表單數(shù)據(jù)與URL分開發(fā)送，用戶端的計(jì)算機(jī)會通知服務(wù)器來讀取數(shù)據(jù)
enctype	r表單信息的編碼方式有三個屬性值 text/plain application/x-www-form-urlencoded multipart/form-data	第一種是純文本形式傳送 第二種是默認(rèn)的編碼格式 第三種是MIME編碼，上傳文件的表單必須用著這個編碼
target	目標(biāo)窗口的打開方式	與a鏈接標(biāo)簽的target屬性相同

提供一個登錄頁面的小案例：

<!-- html部分 --><div class="box"><h2>歡迎登錄</h2><form action="" name="" method="" enctype="" target=""><label for="" class="name"><p>用戶名：</p><input type="text" value=""></label><label for="" class="pass"><p>密碼：</p><input type="password"></label><label for="" class="ok"><input type="submit"><input type="reset"></label></form></div> /* css部分 */*{margin: 0;padding: 0;}.box{width: 600px;height: 600px;background-color: chartreuse;margin: 0 auto;}.box h2{width: 100px;text-align: center;margin: 0 auto;}.box p{width: 80px;float: left;}.box label{line-height: 40px;display: block;}form{width: 300px;height: 300px;margin: 0 auto;}.ok{width: 100px;margin: 0 auto;}

輸入標(biāo)簽

輸入標(biāo)簽就是<input>標(biāo)簽，通過設(shè)置其type值即可呈現(xiàn)出不同的表單元素，常用的幾種為：

• 文本框
• 單/多選框
• 按鈕
• 文件框
• 圖像域

文本框

表格中常用的文本框有兩種

• 單行文本框
• 密碼框

單行文本框的type屬性應(yīng)該設(shè)置為text
密碼文本框的type屬性應(yīng)該設(shè)置為password

在密碼框中輸入的字符，將會被隱藏為***或者原點(diǎn)標(biāo)識

語法格式

<form action="" class="xxx"><input type="text" name="" size="" maxlength="" value="請?jiān)谶@里輸入..."><input type="password" name="" size="" maxlength="" value="..."></form>

單行文本框與密碼框一樣，都有額外的4個屬性

• name命名文本框，用于與其他表單元素作區(qū)分
• size表示文本框在頁面中顯示的長度，以字符為單位
• maxlength表示最長輸入長度
• value表示文本框中的默認(rèn)文字

單選框和復(fù)選框

顧名思義，單選框用于只能單選的選項(xiàng)，復(fù)選框用于可多選的選項(xiàng)
單選舉例：性別選項(xiàng)
復(fù)選舉例：興趣愛好

語法格式

<form action=""><label for=""><input type="radio" value="男" name="sex" checked="checked">男<input type="radio" value="女" name="sex">女</label><input type="checkbox" value="籃球" name="like">籃球<input type="checkbox" value="足球" name="like">足球<input type="checkbox" value="羽毛球" name="like">羽毛球<input type="checkbox" value="乒乓球" name="like">乒乓球</form>

單選框：type值為radio，value值為傳回信息，name是給單選取名字達(dá)到分組，否則無法將兩個‘男和女’這兩個單選框分到同一個類別，checked是默認(rèn)選中

復(fù)選框：type值為checkbox，其他屬性意思與單選框一致

按鈕

在HTML中，按鈕有三種

普通按鈕（常配合js使用）

提交按鈕（提交表單信息）

重置按鈕（重置表單信息）

語法格式

<form action=""><input type="button" name="自定義" id="" value="打印"><input type="submit" name="按鈕名" value="提交"><input type="reset" name="按鈕名" value="重置"></form>

普通按鈕：type="button" name是自定義名字 value是顯示在html上的信息
提交按鈕：type="submit"``name是自定義名字 value是顯示在html上的信息（如果不寫value，默認(rèn)就是提交）
提交按鈕：type="reset"``name是自定義名字 value是顯示在html上的信息（如果不寫value，默認(rèn)就是重置）
注：普通按鈕還有一個屬性是click，通常接一個函數(shù)，但是這樣寫，一行代碼過多，所以使用js綁定點(diǎn)擊事件函數(shù)比較好

圖像域和文件域

圖像域：使用一些圖片來代替按鈕的顯示，但是與按鈕有一樣的功能，即把按鈕在頁面上的顯示更換為一張照片，用于增強(qiáng)美感

文件域：將本地文件上傳到服務(wù)器端

語法格式

<form action=""><input type="image" src="./img/01.jpg" width="50px" name="" id="" value="123"><input type="file"></form>

圖像域：type="image"，src是圖片路徑，可以是相對路徑，也可以是絕對路徑，也可以添加width、height設(shè)置圖片大小，name是設(shè)置按鈕類型（button、submit）默認(rèn)是button

文件域：type="file"

文本域

文本域：與文本框唯一的區(qū)別在于可以添加多行文字，通常用于大量輸入字符的地方，如評價、答題界面、留言板

語法格式

<textarea name="pingjia" value="" id="" cols="30" rows="10"></textarea>

• name：文本域的名稱
• value：默認(rèn)的文字
• cols：列數(shù)
• row：行數(shù)

注：如果超出設(shè)置行數(shù)列數(shù)將會出現(xiàn)滾動條

菜單/列表

菜單/列表也被稱為下拉框，即內(nèi)置多個選項(xiàng)進(jìn)行單選，這類選項(xiàng)一般是多選一，使用多個單選框比較浪費(fèi)空間，所以使用下拉列表。

語法格式

<form action=""><select name="" size="" id=""><option value="">不及格</option><option value="">及格</option><option value="">中等</option><option value="">良好</option><option value="">優(yōu)秀</option></select></form>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

使用select標(biāo)簽表示菜單/列表，使用option標(biāo)簽表示一個選項(xiàng)

• name：列表的名稱
• size：列表顯示長度，如果不使用或者0就是下拉列表，使用了就是列表
• value：返回的值

總結(jié)

以上是生活随笔為你收集整理的HTML+CSS+JavaScript复习笔记持更（三）——表单篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。