亚洲精品久久久久久第一页-人妻少妇精彩视品一区二区三区-91国产自拍免费视频-免费一级a在线播放视频正片-少妇天天日天天射天天爽-国产大屁股喷水视频在线观看-操美女骚穴抽插性爱视频-亚洲 欧美 中文字幕 丝袜-成人免费无码片在线观看

  1. 首頁 > 生活知識(shí) > >

HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

生活百科

HTML 表單用于搜集不同類型的用戶輸入 。HTML5 Input，擁有多個(gè)新的表單輸入類型，提供了更好的輸入控制和驗(yàn)證 ， 今天將為大家?guī)鞨TML中的表單及其input輸入類型 。
一、HTML表單
1、HTML表單用于收集不同類型的用戶輸入 ， 是一個(gè)包含表單元素的區(qū)域并且允許用戶在表單中輸入內(nèi)容，比如文本域（textarea）、下拉列表、單選框（radio=buttons）、復(fù)選框（checkboxes）等 。
2、表單使用標(biāo)簽<form>來設(shè)置 ， 示例：

HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
運(yùn)行結(jié)果：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
二、HTML表單屬性：
1、HTML表單包含表單元素，表單元素是指不同類型的input元素、復(fù)選框、單選按鈕、提交按鈕等 。
2、action屬性
在上面的示例中出現(xiàn)了action屬性，action屬性定義在提交表單執(zhí)行的動(dòng)作，向服務(wù)器提交表單的通常做法是使用提交按鈕 。
通常 ， 表單會(huì)被提交到web服務(wù)器上的網(wǎng)頁，上面的例子中，則指定了某個(gè)服務(wù)器腳本來處理被提交表單 。
如果省略 action 屬性，則 action 會(huì)被設(shè)置為當(dāng)前頁面 。
3、method 屬性
method屬性規(guī)定在提交表單時(shí)所用的 HTTP 方法（GET 或 POST）：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖

HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
如果表單提交是被動(dòng)的（比如搜索引擎查詢） ， 并且沒有敏感信息，使用get 。
如果表單正在更新數(shù)據(jù) ， 或者包含敏感信息（例如密碼） ， 使用post 。
4、如果要正確地被提交，每個(gè)輸入字段必須設(shè)置一個(gè) name 屬性，示例：
<!DOCTYPE html>
<html>
<body>
<form action=”/demo/demo_form.asp”>
First name:<br>
<input type=”text” name=”Firstname” value=http://www.wokk.cn/”Mickey”>
<br>
Last name:<br>
<input type=”text” name=”lastname” value=http://www.wokk.cn/”Mouse”>
<br><br>
<input type=”submit” value=http://www.wokk.cn/”Submit”>
</form>
<p>如果您點(diǎn)擊提交，表單數(shù)據(jù)會(huì)被發(fā)送到名為 demo_form.asp 的頁面 。</p>
<p>first name 不會(huì)被提交，因?yàn)榇?input 元素沒有 name 屬性 。</p>
</body>
</html>
運(yùn)行結(jié)果：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
5、target 屬性
target 屬性規(guī)定提交表單后在何處顯示響應(yīng)，target 屬性可設(shè)置以下值之一：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
默認(rèn)值為 _self，這意味著響應(yīng)將在當(dāng)前窗口中打開 。
6、Autocomplete 屬性
autocomplete 屬性規(guī)定表單是否應(yīng)打開自動(dòng)完成功能 。
啟用自動(dòng)完成功能后，瀏覽器會(huì)根據(jù)用戶之前輸入的值自動(dòng)填寫值，示例：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
運(yùn)行結(jié)果：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
7、所有<form>屬性的列表：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
三、HTML表單元素：
1、<input>元素是最重要的表單元素 ， 有很多的形態(tài)，根據(jù)不同的type屬性，例如：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
①　文本輸入（text），示例：
<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type=”text” name=”firstname”>
<br>
Last name:<br>
<input type=”text” name=”lastname”>
</form>
<p>請(qǐng)注意表單本身是不可見的 。</p>
<p>同時(shí)請(qǐng)注意文本字段的默認(rèn)寬度是 20 個(gè)字符 。</p>
</body>
</html>
運(yùn)行結(jié)果：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
②　單選按鈕輸入（radio），示例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type=”radio” name=”sex” value=http://www.wokk.cn/”male” checked>Male
<br>
<input type=”radio” name=”sex” value=http://www.wokk.cn/”female”>Female
</form>
</body>
</html>
運(yùn)行結(jié)果：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖

HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
③　提交按鈕（submit），示例：
<!DOCTYPE html>
<html>
<body>
<form action=”/demo/demo_form.asp”>
First name:<br>
<input type=”text” name=”firstname” value=http://www.wokk.cn/”Mickey”>
<br>
Last name:<br>
<input type=”text” name=”lastname” value=http://www.wokk.cn/”Mouse”>
<br><br>
<input type=”submit” value=http://www.wokk.cn/”Submit”>
</form>
<p>如果您點(diǎn)擊提交 ， 表單數(shù)據(jù)會(huì)被發(fā)送到名為 demo_form.asp 的頁面 。</p>
</body>
</html>
運(yùn)行結(jié)果：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
2、<select>元素
<select>元素定義下拉列表，示例：
<!DOCTYPE html>
<html>
<body>
<form action=”/demo/demo_form.asp”>
<select name=”cars”>
<option value=http://www.wokk.cn/”volvo”>Volvo
<option value=http://www.wokk.cn/”saab”>Saab
<option value=http://www.wokk.cn/”fiat”>Fiat
<option value=http://www.wokk.cn/”audi”>Audi
</select>
<br><br>
<input type=”submit”>
</form>
</body>
</html>
運(yùn)行結(jié)果：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
3、<fieldset>元素
<fieldset>元素組合表單中的相關(guān)數(shù)據(jù)
<legend>元素為<fieldset>元素定義標(biāo)題，示例：
<!DOCTYPE html>
<html>
<body>
<form action=”/demo/demo_form.asp”>
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type=”text” name=”firstname” value=http://www.wokk.cn/”Mickey”>
<br>
Last name:<br>
<input type=”text” name=”lastname” value=http://www.wokk.cn/”Mouse”>
<br><br>
<input type=”submit” value=http://www.wokk.cn/”Submit”>
</fieldset>
</form>
</body>
</html>
運(yùn)行結(jié)果：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
4、<textarea> 元素
<textarea> 元素定義多行輸入字段（文本域）、示例：
<!DOCTYPE html>
<html>
<body>
<form>
<textarea name=”message” rows=”10″ cols=”30″>
The cat was playing in the garden.
</textarea>
</form>
</body>
</html>
運(yùn)行結(jié)果：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
5、HTML5<datalist>元素
<datalist> 元素為 <input> 元素規(guī)定預(yù)定義選項(xiàng)列表 。
用戶會(huì)在他們輸入數(shù)據(jù)時(shí)看到預(yù)定義選項(xiàng)的下拉列表 。
<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性，示例：
<!DOCTYPE html>
<html>
<body>
<form action=”/demo/demo_form.asp”>
<input list=”browsers” name=”browser”>
<datalist id=”browsers”>
<option value=http://www.wokk.cn/”Internet Explorer”>
<option value=http://www.wokk.cn/”Firefox”>
<option value=http://www.wokk.cn/”Chrome”>
<option value=http://www.wokk.cn/”O(jiān)pera”>
<option value=http://www.wokk.cn/”Safari”>
</datalist>
<input type=”submit”>
</form>
</body>
</html>
運(yùn)行結(jié)果：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
四、HTML表單輸入類型
輸入類型
定義
text
定義供文本輸入的單行輸入字段
password
定義密碼字段
submit
定義提交表單數(shù)據(jù)至表單處理程序的按鈕
radio
定義單選按鈕
checkbox
定義復(fù)選框
<input>中的type：
類型
定義
radio
定義單選按鈕
checkbox
定義復(fù)選框
button
定義按鈕
number
用于應(yīng)該包含數(shù)字值的輸入字段
date
用于應(yīng)該包含日期的輸入字段
color
用于應(yīng)該包含顏色的輸入字段
range
用于應(yīng)該包含一定范圍內(nèi)的值的輸入字段
month
允許用戶選擇月份和年份
week
允許用戶選擇周和年
time
允許用戶選擇時(shí)間（無時(shí)區(qū)）
datetime
允許用戶選擇日期和時(shí)間（有時(shí)區(qū)）
datetime-local
允許用戶選擇日期和時(shí)間（無時(shí)區(qū)）
email
用于應(yīng)該包含電子郵件地址的輸入字段
search
用于搜索字段（搜索字段的表現(xiàn)類似常規(guī)文本字段）
tel
用于應(yīng)該包含電話號(hào)碼的輸入字段
url
用于應(yīng)該包含 URL 地址的輸入字段
輸入限制：
HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫

文章插圖
【HTML按鈕的多種使用方法 html單選按鈕代碼怎么寫】這就是有關(guān)HTML表單的大概內(nèi)容了，希望這篇HTML的表單及其input輸入類型的知識(shí)點(diǎn)能對(duì)大家有所幫助 。


    以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請(qǐng)您及時(shí)就醫(yī)或請(qǐng)專業(yè)人士給予相關(guān)指導(dǎo)!

    「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對(duì)您有所幫助：