表單

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

表單概述

表單在網頁中經常可見，基本上所有的需要提交收集信息的網站都需要用到表單，最常見的就是各種網站的登錄頁面，一個登陸頁面最主要的就是各種表單元素的收集，表單主要使用form標簽來完成

表單簡介

表單通常設計在HTML中，當用戶按照提示信息填寫完成后，瀏覽器通將信息提交到后臺服務器上，經過服務器的處理驗證后，再將用戶需要的信息傳回，這樣就完成一個交互。

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

舉例，大學慕課的登錄頁面：

form 標簽

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

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

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

form屬性含義說明

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

輸入標簽

輸入標簽就是<input>標簽，通過設置其type值即可呈現出不同的表單元素，常用的幾種為：

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

文本框

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

• 單行文本框
• 密碼框

單行文本框的type屬性應該設置為text
密碼文本框的type屬性應該設置為password

在密碼框中輸入的字符，將會被隱藏為***或者原點標識

語法格式

<form action="" class="xxx"><input type="text" name="" size="" maxlength="" value="請在這里輸入..."><input type="password" name="" size="" maxlength="" value="..."></form>

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

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

單選框和復選框

顧名思義，單選框用于只能單選的選項，復選框用于可多選的選項
單選舉例：性別選項
復選舉例：興趣愛好

語法格式

<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是給單選取名字達到分組，否則無法將兩個‘男和女’這兩個單選框分到同一個類別，checked是默認選中

復選框：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，默認就是提交）
提交按鈕：type="reset"``name是自定義名字 value是顯示在html上的信息（如果不寫value，默認就是重置）
注：普通按鈕還有一個屬性是click，通常接一個函數，但是這樣寫，一行代碼過多，所以使用js綁定點擊事件函數比較好

圖像域和文件域

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

文件域：將本地文件上傳到服務器端

語法格式

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

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

文件域：type="file"

文本域

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

語法格式

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

• name：文本域的名稱
• value：默認的文字
• cols：列數
• row：行數

注：如果超出設置行數列數將會出現滾動條

菜單/列表

菜單/列表也被稱為下拉框，即內置多個選項進行單選，這類選項一般是多選一，使用多個單選框比較浪費空間，所以使用下拉列表。

語法格式

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

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

使用select標簽表示菜單/列表，使用option標簽表示一個選項

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。