當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

表单、表格常用属性大全

發布時間：2024/1/1 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了表单、表格常用属性大全小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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表單

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

1.1 form表單標簽

用來標記一個表單，存儲表單數據
語法格式：
<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：文本框最大輸入字符數
minlength：文本框最小輸入字符數

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：單選框的預設值（向服務器提交數據時傳遞的值）
<label></label>標簽：輔助input標簽進行選擇

1.2.4 checkbox多選框

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

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

<form action="">賬號：<input type="text" name="username" placeholder="請輸入賬號" value="123456"><br>密碼：<input type="password" name="password" placeholder="請輸入密碼" value="123456"><form action="">性別：<input type="radio" name="sex" checked><label for="boy">男孩</label><input type="radio" name="sex"><label for="girl">女孩</label><br>喜歡的科目：<input type="checkbox" name="subject" checked><label for="Chinese">語文</label><input type="checkbox" name="subject"><label for="math">數學</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><input type="reset" value="重新選擇"></form>

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

botton：普通按鈕（普通按鈕可以通過js綁定腳本程序，完成一些操作，后要結合后面的js）結合js如：<input type="button" value="給關閉" oncClick="WinClose()">
submit：提交按鈕，可以激發表單提交的動作（結合后面js，如一些注冊、登錄功能的實現）
reset：重置按鈕，可以將表單恢復到初始的頁面

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

1.2.6 image 圖像提交按鈕

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

效果圖：

1.2.7 css3新特性

<form action=""><input type="file"><br> 請選擇日期：<input type="date"><br>請選擇時間：<input type="time"><br>請輸入數字：<input type="number" placeholder="只能輸入數字,字母e是特殊數字"><br>請滑動滑塊驗證：<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 {/寫樣式/}

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

二、select下拉菜單

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

<label for="season">請選擇最喜歡的季節</label><select name="" id=""><option value="red">春天</option><option value="green">夏天</option><option value="blue" selected>秋天</option><option value="white" disabled>冬天</option></select>

效果圖：

三、textarea 多行輸入文本框

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

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

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

四、表格

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

效果圖：

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

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>21歲-29歲特征:美女</td></tr><tr><td>文文</td><td rowspan="2">女</td><td>22歲-28歲特征:有錢</td></tr><tr><td>水水</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">都喜歡漂亮的小姐姐</td></tr></table>

效果圖：

總結

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

總結

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

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

上一篇： STC89C52高级定时器简介
下一篇：进口红外热像仪Fluke TI480 P

编程问答

表单、表格常用属性大全

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

一、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 多行輸入文本框

四、 表格

總結

總結

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

四、表格