javascript
HTML+CSS+JavaScript复习笔记持更(三)——表单篇
表單
- 表單概述
 - 表單簡介
 - form 標簽
 
- 輸入標簽
 - 文本框
 - 語法格式
 
- 單選框和復選框
 - 語法格式
 
- 按鈕
 - 語法格式
 
- 圖像域和文件域
 - 語法格式
 
- 文本域
 - 語法格式
 
- 菜單/列表
 - 語法格式
 
表單概述
表單在網頁中經常可見,基本上所有的需要提交收集信息的網站都需要用到表單,最常見的就是各種網站的登錄頁面,一個登陸頁面最主要的就是各種表單元素的收集,表單主要使用form標簽來完成
表單簡介
表單通常設計在HTML中,當用戶按照提示信息填寫完成后,瀏覽器通將信息提交到后臺服務器上,經過服務器的處理驗證后,再將用戶需要的信息傳回,這樣就完成一個交互。
表單在這里最主要的功能就是收集信息,具體來說是收集瀏覽者的信息,例如各種登錄界面,篩選,搜索等模塊,在表單元素中,最常用的就是文本框、密碼框、單選按鈕、復選框等
舉例,大學慕課的登錄頁面:
 
form 標簽
表單是html頁面中的某個區域,而這個區域有form標簽進行劃分,form是雙標簽,所有的表單元素和必要的提示信息,都必須寫在form標簽中。語法格式如下:
<form action="" name="" method="" enctype="" target="">用戶名:<input type="text" value="">密碼:<input type="password"></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中,按鈕有三種
語法格式
<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复习笔记持更(三)——表单篇的全部內容,希望文章能夠幫你解決所遇到的問題。
                            
                        - 上一篇: 新手小白零基础搭建个人博客(三)部署篇
 - 下一篇: HTML+CSS+JavaScript复