html零基礎必看——html入門，編程就是如此簡單

第十二章：表單、表格標簽

• 一、form表單
• • 1.1 form表單標簽
  • 1.2 input 輸入表單控件標簽
  • • 1.2.1 text文本框
    • 1.2.2 password密碼框
    • 1.2.3 radio單選框
    • 1.2.4 checkbox多選框
    • 1.2.5 普通按鈕 提交按鈕 重置按鈕
    • 1.2.6 image 圖像提交按鈕
    • 1.2.7 css3新特性
  • 2 `：focus`表單獲得焦點時被選中
• 二、select下拉菜單
• 三、textarea 多行輸入文本框
• 四、 表格
• 總結

一、form表單

表單主要是為了用戶的信息，采集數(shù)據(jù)，將用戶輸入的信息發(fā)送到服務器，然后返回給登錄接口。

1.1 form表單標簽

用來標記一個表單，存儲表單數(shù)據(jù)
語法格式：
<form action="" method="" name="" target="">表單內容</form>

form表單標簽的一些屬性：

• form 表單域
• action: 表示提交地址
• name:表單名稱
• target: 提交完表單之后新頁面在哪里打開。前面a鏈接里有講到

1.2 input 輸入表單控件標簽

• input是行內元素，因此可以在一行顯示。同時，input又是置換元素，因此支持寬高屬性。（在前面第五章中： 二、行內元素有講到，img、input都是行內元素，又是置換元素）

格式：<input type="輸入控件類型" >

input 輸入表單控件的一些屬性：

• placeholder: 提示你要輸入什么內容
• value: 表示控件里面默認輸入的內容
• disabled: 禁止選中 你選擇內容
• checked: 用在單選和多選身上 表示默認勾選

1.2.1 text文本框

格式：<input type="text" name= "username" id="" placeholder="" value="" size="" maxlength="" minlength="">

• name：文本框的名字，可以重復
• id： 也是文本框的名字，不可以重復
• placeholder ：提示你要輸入什么內容
• value: 表示控件里面默認輸入的內容
• size:文本框的寬度
• maxlength：文本框最大輸入字符數(shù)
• minlength：文本框最小輸入字符數(shù)

1.2.2 password密碼框

格式：<input type="text" name= "username" id="" placeholder="" value="" size="" maxlength="" minlength="">
密碼框和文本框屬性、格式和文本框一樣，只是密碼框輸入的內容會被小黑點代替

1.2.3 radio單選框

格式：<input type="radio" name="" checked vaule><label for="">單選項的名稱</label>

• name：單選框的名字。注意：同一組單選框里面的每一組單選項的name名字必須一致
• checked：表示默認勾選該項選擇的內容
• disabled: 禁止選中該項選擇的內容
• vaule：單選框的預設值（向服務器提交數(shù)據(jù)時傳遞的值）
• <label></label>標簽 ：輔助input標簽進行選擇

1.2.4 checkbox多選框

格式：<input type="checkbox" name="" checked vaule><label for="">當前選項的名稱</label>

• name：單選框的名字。注意：同一組復選框里面的每一組單選項的name名字必須一致
• checked：表示默認勾選該項選擇的內容
• disabled: 禁止選中該項選擇的內容
• vaule：復選框的預設值（向服務器提交數(shù)據(jù)時傳遞的值）
• <label></label>標簽 ：輔助input標簽進行選擇

<form action="">賬號：<input type="text" name="username" placeholder="請輸入賬號" value="123456"><br><!-- 因為input是行內元素，不會自動換行，所以我們加上一個換行符 -->密碼：<input type="password" name="password" placeholder="請輸入密碼" value="123456"><form action="">性別：<input type="radio" name="sex" checked><label for="boy">男孩</label><!-- 男孩里面加上了checked 表示默認勾選男孩 --><input type="radio" name="sex"><label for="girl">女孩</label><br>喜歡的科目：<input type="checkbox" name="subject" checked><label for="Chinese">語文</label><!-- 語文里面加上了checked 表示默認勾選語文 --><input type="checkbox" name="subject"><label for="math">數(shù)學</label><input type="checkbox" name="subject"><label for="English">英語</label><input type="checkbox" name="subject"><label for="physical">物理</label><input type="checkbox" name="subject" checked><label for="history">歷史</label><!-- 歷史里面加上了checked 表示默認勾選歷史 --><input type="reset" value="重新選擇"><!-- 默認值就是重置，此處通過value改變預設值 --></form>

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

• botton：普通按鈕（普通按鈕可以通過js綁定腳本程序，完成一些操作，后要結合后面的js）結合js如：<input type="button" value="給關閉" oncClick="WinClose()">

• submit：提交按鈕，可以激發(fā)表單提交的動作 （結合后面js，如一些注冊、登錄功能的實現(xiàn)）

• reset： 重置按鈕，可以將表單恢復到初始的頁面

  這三種按鈕都可以通過value屬性指定按鈕上顯示的文字內容

1.2.6 image 圖像提交按鈕

格式：<input type="image" src="作為圖像按鈕的圖片路徑"> -->

<form action=""><input type="button" value="我是普通按鈕"><br><input type="submit" value="我是提交按鈕"><input type="reset" value="我是重置按鈕"><!-- 使用圖片作為提交1按鈕的樣式 --><input type="image" src="./img/2.jpg" width="30px" height="30px"></form>

效果圖：

1.2.7 css3新特性

<form action=""><!-- 7.文件上傳框file --><!-- css3新特性 --><!-- 文件上傳 --><input type="file"><br> <!-- 日期選擇框 -->請選擇日期：<input type="date"><br><!-- 時間 -->請選擇時間：<input type="time"><br><!-- 數(shù)字輸入框 只能輸入數(shù)字 字母e是特殊數(shù)字 -->請輸入數(shù)字：<input type="number" placeholder="只能輸入數(shù)字,字母e是特殊數(shù)字"><br>請滑動滑塊驗證：<!-- 數(shù)字滑塊 --><input type="range"><br><!-- 顏色 -->請選擇顏色：<input type="color"><br><!-- 電子郵件 -->請輸入電子郵件：<input type="email" placeholder="請輸入電子郵件"><br></form>

效果圖：

2 ：focus表單獲得焦點時被選中

鼠標點擊表單控件輸入框時，外面的輸入框可通過css修改的樣式顯示。
只限于表單標簽使用才會生效。

這段樣式加入rest（1）.css外部樣式里，引入就行 /* 清除默認焦點邊框 */button,input{outline: none;}

格式：

選擇器：focus {/寫樣式/}

<style>/* 這段加入rest（1）.css外部樣式里，引入就行 *//* 清除默認焦點邊框 */button,input{outline: none;}.text{width: 200px;height: 50px;border: 1px solid red;}/* 點擊表單控件 獲取焦點選中鼠標點擊表單控件輸入框時，外面的輸入框可通過css修改的樣式顯示*/.text:focus{border: 1px solid green;}</style> </head> <body>賬號：<input type="text" name="username" class="text" placeholder="請輸入賬號"><br>密碼：<input type="password" name="password" class="text" placeholder="請輸入賬號">

效果圖：鼠標點擊輸入控件框時，這個控件框顏色會變成樣式里面自己更改的顏色。

二、select下拉菜單

• select是一個容器元素，標記一個菜單或下拉列表。它所包含的option元素標記一個菜單或下拉列表中的每一項。
• 當select使用multiple屬性時，用戶可以同時選擇列表中的多項內容
• option標記的selected屬性指定該項被選取，默認是第一項被選取
• option標記的disabled屬性指定該項不可用

<label for="season">請選擇最喜歡的季節(jié)</label><select name="" id=""><option value="red">春天</option><option value="green">夏天</option><option value="blue" selected>秋天</option><!-- option標記的selected屬性指定該項被選取，默認是第一項被選取 --><option value="white" disabled>冬天</option><!-- option標記的disabled屬性指定該項不可用 --></select>

效果圖：

三、textarea 多行輸入文本框

一般用于網(wǎng)頁底部留言之類的多行輸入文本框
格式：<textarea name="textarea" id="" cols="number" rows="number" placeholder="歡迎留言" readonly></textarea>

• textarea:伸縮文本框元素
• cols: 每一行中字符數(shù)量
• rows: 顯示行數(shù)
• placeholder: 提示你要輸入什么內容
• readonly：設定多行文本區(qū)只讀，不能編輯和修改

<textarea name="textarea" id="" cols="number" rows="number" placeholder="歡迎留言" readonly></textarea>

效果圖：鼠標點擊右下角可以伸縮文本框大小

四、 表格

• table：表格標簽，table標記代表一個表格
• tr：行 有多少個tr，就有多少行
• td ：單元格，一行里有多個td單元格構成
• th：表頭 一般用于表格的第一行或第一列
• caption ：表格標題

<style>table {width: 300px;height: 50px;border: 1px solid red;}th,tr,td {width: 100px;height: 50px;border: 1px solid pink;text-align: center;}</style> </head><body><!-- 定義表格 --><table><!-- 表格里面的一行 --><tr><!-- 表示單元格 --><td>123</td><td>123</td><td>123</td></tr><tr><td>你好</td><td>18歲</td><td>456</td></tr></table><!-- table 定義表格標簽caption: 定義表格標題tbody: 表格內容 不寫也會自動生成th:表頭標簽tr:表格一行 td:表示表格里一個單元格 必須嵌套在 tr中標簽thead：代表表格頭部tbody: 表格內容 不寫也會自動生成tfoot：代表表格尾部--><table><!-- 定義這個表格標題 --><caption>老師調查表</caption><tr><!-- 表頭 --><th>姓名</th><th>年齡</th><th>愛好</th><th>性別</th></tr><tr><!-- 單元格 --><td>小春</td><td>18歲</td><td>寫代碼</td><td>男</td></tr><tr><!-- 單元格 --><td>無限</td><td>19歲</td><td>喜歡漂亮小姐姐</td><td>男</td></tr><tr><!-- 單元格 --><td>夏梔老師</td><td>19歲</td><td>愛吃小龍蝦 螃蟹</td><td>女</td></tr></table>

效果圖：

表格合并單元格：
合并單元格
公式: 合并單元格個數(shù) - 1 = 刪除個數(shù)

rowspan: 跨行合并 合并順序是從上往下 合并的colspan: 跨列合并 先左后右 <style>table{width: 900px;border: 1px solid red;margin: 30px auto;/* 表格 單邊框樣式 */border-collapse: collapse;}tr,td,th{width: 350px;height: 60px;border: 1px solid #096;text-align: center;}</style> </head> <body><!-- 合并單元格 難點 --><table ><!-- 表格標題 --><caption>征婚表</caption><tr><th>姓名</th><th>性別</th><th>年齡</th><th>征婚條件</th></tr><tr><td>黃黃</td><td>男</td><td rowspan="3">21歲</td><!-- 這是跨行合并， 此處td rowspan="3"，后面刪除兩個第三列的td即可--><td>21歲-29歲 特征:美女</td></tr><tr><td>文文</td><td rowspan="2">女</td><!-- <td>21歲</td> --><td>22歲-28歲 特征:有錢</td></tr><tr><td>水水</td><!-- <td>女</td> --><!-- <td>21歲</td> --><td>22歲-28歲 特征:有錢</td></tr><tr><td>西西</td><td>男</td><td>22歲</td><td>21歲-30歲 特征:有錢 美女</td></tr><tr><td>南南</td><td>男</td><td>22歲</td><td>21歲-30歲 特征:有錢 美女 黑絲</td></tr><tr><!-- 這是跨列合并， 此處td colspan="4"，后面刪除本行里的3個td即可--><td colspan="4">都喜歡漂亮的小姐姐</td><!-- <td>都喜歡漂亮的小姐姐</td><td>都喜歡漂亮的小姐姐</td><td>都喜歡漂亮的小姐姐</td> --></tr></table><!-- 合并單元格 公式: 合并單元格個數(shù)(2) - 1 = 刪除個數(shù) 2rowspan: 跨行合并 合并順序是從上往下 合并的colspan: 跨列合并 先左后右-->

效果圖：

總結

上述是小編為大家整理的form表單，以及input輸入表單控件的一些類型、同時也補充了下拉菜單、多行文本輸入框，最后還講到表格、表格的單元格合并等結合相關案例做了一個比較詳細的講解。參考多方資料加上自己的理解整理出來的，或有不確之處和疏漏的地方，還望各位大佬能夠不吝賜教，加以斧正，小編在此先行謝過了。

總結

以上是生活随笔為你收集整理的表单、表格常用属性大全的全部內容，希望文章能夠幫你解決所遇到的問題。

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