HTML 表單元素(下)

2021-08-09 07:14:26 字數 3002 閱讀 9191

其他元素

輸入驗證

元素名稱

說明select

生成乙個下拉列表進行選擇

optgroup

對select元素進行編組

option

select元素中的專案

textarea

生成乙個多行文字框

output

表示計算結果

name="fruit01">

value="1">蘋果option>

value="2">香蕉option>

value="3">橘子option>

select>

提交button>

form>

解釋:< select > 下拉列表元素至少包含乙個 < option > 子元素,才能形成有效的選項列表。< select > 元素包含兩個子元素 < option > 專案元素和 < optgroup > 分組元素,還包含了一些額外屬性。

name

設定提交時的名稱

disabled

將下拉列表禁用

form

將表單的下拉列表和某個表單掛鉤

size

設定下拉列表的高度

multiple

設定是否可以多選

autofocus

獲取焦點

required

選擇驗證,設定後必須選擇才能通過

selected

預設首選

屬性名稱

說明

action=""

target="_blank">

label="水果類">

value="1">蘋果option>

value="2"

selected>香蕉option>

value="3"

label="橘子">

option>

optgroup>

label="粗糧">

value="4">小公尺option>

value="5">大公尺option>

value="6">玉公尺option>

optgroup>

select>

form>

name="content"

placeholder="請留下您的建議!">

textarea>

提交button>

form>

解釋:生成乙個可變更大小的多行文字框。屬性如下:

name

設定提交時的名稱

form

將表單外的多行文字框與某個表單掛鉤

readonly

設定多行文字框唯讀

disabled

將多行文字框禁用

maxlength

設定最大可輸入的字元長度

autofocus

獲取焦點

placeholder

設定輸入時的提示資訊

rows

設定行數

cols

設定列數

wrap

設定是否插入換行符,有soft和hard兩種

required

設定必須輸入值,否則無法通過驗證

屬性名稱

說明

name="content"

rows="5"

cols="10"

warp="hard">

textarea>

提交button>

form>

action=""

target="_blank"

oninput="res.value=num1.valueasnumber * num2.valueasnumber">

type="number"

id="num1">xtype="number"

id="num2"> =

for="num1 num2"

name="res">

form>

html5對錶提供了輸入驗證檢查方式,但這種驗證還是比較簡陋的,並且不同的瀏覽器支援的成熟度還不同。在大部分情況下,可能還是要借助jquery等前段庫來實現豐富的驗證功能和顯示效果。

action=""

target="_blank">

type="text"

name="user01"

required="">

提交button>

form>

action=""

target="_blank">

type="number"

name="user02"

min="10"

max="100">

提交button>

form>

action=""

target="_blank">

type="text"

id="user03"

placeholder="請輸入區號+座機"

required

pattern="^(0[0-9]/-)?([2-9][0-9])+(/-[0-9])?$">

提交button>

form>

action=""

target="_blank"

novalidate>

type="text"

id="user03"

placeholder="請輸入區號+座機"

required

pattern="^(0[0-9]/-)?([2-9][0-9])+(/-[0-9])?$">

提交button>

form>

HTML表單元素

表單元素是允許使用者在表單中 比如 文字域,下拉列表,單選框,核取方塊等等 輸入資訊的元素 表單標籤 文字域 text fields 當使用者要在表單中鍵入字母,數字等內容時,就會用到文字域 單選按鈕 radio buttons 當使用者從若干給定的的選擇中選取其一時,就會用到單選框 核取方塊 ch...

html表單元素

自學打卡 2 form 表單元素,讓使用者把資料提交給伺服器 action 指定把請求和資料提交給哪個頁面 伺服器。元素 type text 文字內容 password 密碼 hidden 隱藏框 checkbox 核取方塊 radio 單選框 submit 提交 reset 重置 image 可以...

HTML表單元素 表單控制項

html是部署在伺服器上的文字檔案根據http協議,瀏覽器發出請求給伺服器,伺服器做出響應,給瀏覽器返回乙個html瀏覽器解釋執行html,從而顯示出內容 html部署在伺服器上,執行在瀏覽器上 表單用於顯示 收集資訊,並提交資訊到伺服器 表單二要素 表單元素 表單控制項 input text 文字...