前端HTML表單的屬性和使用
阿新 • • 發佈:2019-01-31
1、分類
1、input 組元素
2、textarea 元素
3、select 和 option 選項框
4、其他元素
2、input 元素
1、語法
<input> 或 <input/>
2、屬性
1、type
根據不同的type屬性值,可以建立各種型別的輸入控制元件,比如:文字框,密碼框,複選框,按鈕 等... ...
2、value
控制元件的值即要提交給伺服器的資料
3、name
控制元件的名稱,伺服器要用
命名規範:匈牙利命名法
控制元件的縮寫+功能名稱
4、disabled
該屬性只要出現在標籤中,表示的是 禁用該控制元件
3、input的具體控制元件
1、文字框與密碼框
文字框:明文顯示使用者輸入的資料
<input type="text">
密碼框:密文顯示使用者輸入的資料
<input type="password">
屬性
1、name
縮寫:txt
ex:
1、建立一個文字框,表示 接受 使用者名稱稱(Username)
<input type="text" name="txtUsername">
2、建立一個密碼框,表示 接受 使用者密碼(Userpwd)
<input type="password" name="txtUserpwd">
2、value
1、表示控制元件的值
2、表示控制元件的預設值
3、maxlength
限制輸入的字元數
4、readonly
只讀-只能看,不能改
該屬性只要出現在標記中,就是隻讀的意思,不需要給值
readonly 與 disabled 的區別
1、readonly 只能看,不能改,但是可以被提交給伺服器
2、disabled 只能看,不能改,但是不能提交給伺服器
注意:對於input來講,如果不寫 type 或者 type值寫錯的時候,預設都是文字框
2、單選按鈕和複選框
單選按鈕:type="radio"
複選框:type="checkbox"
屬性:
1、name
定義名稱
radio縮寫:rdo
checkbox縮寫:chk
還可以對控制元件進行分組,一組單選按鈕和複選框,名稱必須相同
對於單選按鈕:一組中的單選按鈕,最多隻能有一個被選中
2、checked
設定預設被選中
3、按鈕
1、提交按鈕
功能固定化,負責將表中中的表單控制元件提交給伺服器
<input type="submit">
2、重置按鈕
功能固定化,負責將所有表單控制元件的值恢復為初始值
<input type="reset">
3、普通按鈕
無功能,執行客戶端的指令碼(JS)
<input type="button">
屬性:
1、name
縮寫:btn
2、value
按鈕上的顯示文字
4、隱藏域 和 檔案選擇框
1、隱藏域
不希望被使用者看見,但是要提交給伺服器的資訊
<input type="hidden">
name :txt+功能名稱
value :值
2、檔案選擇框
上傳檔案所用
<input type="file">
name : txt+功能名稱
3、textarea - 多行文字域
作用:允許使用者錄入多行資料到表單控制元件中
語法:<textarea></textarea>
屬性:
1、name
縮寫:txt+功能名稱
2、readonly
只讀
3、cols
指定文字區域的列數, 變相設定當前元素寬度
4、rows
指定文字區域的行數,變相設定當前元素高度
4、選項框
1、分類
1、下拉選項框
2、滾動列表
2、語法
1 、<select></select> 建立選項框
屬性:
1、name
縮寫:sel+功能名稱
2、size
取值 大於1的話,則為滾動列表
否則就是下拉選項框
3、multiple
設定多選,該屬性出現在 <select>中,那麼就允許多選(針對滾動列表)
2、<option>顯示文字</option> 選項
屬性:
1、value
選項的值
2、selected
預選中
注意:如果不設定selected屬性的話,那麼選項框中的第一項會預設被選中 。
5、其他元素
1、為控制元件分組
<fieldset></fieldset> : 為控制元件分組
<legend></legend> : 為分組指定一個標題
2、<label> 元素
功能:關聯 文字 與表達元素的,點選文字時,如同點選表單元素一樣
語法:
<label>文字</label>
屬性:
for :表示與該label相關聯的表單控制元件元素的ID值
<input id="man" name="sex" value="男"><label for="man">男</label></input>
4、其他常用標記
1、浮動框架
1、作用
可以在一個瀏覽器視窗中同時顯示多個頁面文件
2、語法
<iframe>內容</iframe>
內容:當瀏覽器不支援<iframe>元素時,將顯示該文字作為描述資訊
屬性:
1、src
要引入頁面的URL
2、width
3、height
4、frameborder
浮動框架的邊框,如果不想要,可以設定為 0
3、注意
該標籤,主要針對的是 靜態頁面的引入
動態頁面中 有專門 引入頁面的方式
2、摘要與細節
1、作用
允許使用者對某些資訊進行展開和收縮
2、語法
<details></details> 用於定義細節
<summary></summary> 用於定義細節中的標題
3、度量元素
1、作用
定義一個度量衡
2、語法
<meter>文字</meter>
屬性:
1、min :定義度量範圍的最小值,預設為0
2、max :定義度量範圍的最大值,預設為1,一般情況下,將max值設定為 100
3、value :度量值,顯示在度量元素上的數值,預設為0
4、時間元素
1、作用
用於關聯時間的不同表現形式
2、語法
<time>文字</time>
屬性:
datetime :文字所對應的 日期時間,如果日期和時間同時設定的話,日期和時間之間用“T”分割
5、高亮文字顯示
1、作用
以突出背景顏色的方式顯示文字
2、語法
<mark>文字</mark>