nput框作為一個(gè)簡(jiǎn)單的輸入框,你對(duì)它的屬性知道有多少？
常見的屬性（帶new為h5新增屬性）:

1、accept：accept 屬性規(guī)定了可通過文件上傳提交的服務(wù)器接受的文件類型。僅用于input的type類型為"file"的時(shí)候。

屬性值：

audio/*，音頻

video/* ，視頻

image/* ，圖片

MIME_type，一個(gè)有效的 MIME 類型，不帶參數(shù)

  <input type="file" name="pic" accept="image/*" />

// 如需規(guī)定多個(gè)值，請(qǐng)使用逗號(hào)分隔

<input  type="file" accept="audio/*,video/*,image/*" />

2、value：指定元素的value值。

屬性值：text

value 屬性對(duì)于不同 input 類型，用法也不同：

• 對(duì)于 "button"、"reset"、"submit" 類型 - 定義按鈕上的文本
• 對(duì)于 "text"、"password"、"hidden" 類型 - 定義輸入字段的初始（默認(rèn)）值
• 對(duì)于 "checkbox"、"radio"、"image" 類型 - 定義與 input 元素相關(guān)的值，當(dāng)提交表單時(shí)該值會(huì)發(fā)送到表單的 action URL。

注意：value 屬性對(duì)于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

注意：value 屬性不適用于 <input type="file">。

<input value="文本" />

3、name:表示的該文本輸入框名稱。用于表單提交后引用表單數(shù)據(jù)。只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值。

屬性值：text

<input type="text" name="email" />

4、size：輸入框的長(zhǎng)度大小。

屬性值：number

<input type="text" name="email" size="35" />

注意：size 屬性適用于下面的 input 類型：text、search、tel、url、email 和 password。

5、maxlength：輸入框中允許輸入字符的最大數(shù)。

屬性值：number

<input type="text" name="usrname" maxlength="10" />

6、readonly：表示該框中只能顯示，不能添加修改。

<input type="text" name="country" value="中國(guó)" readonly />

7、required（new）：屬性規(guī)定必須在提交表單之前填寫輸入字段。

 <input type="text" name="username" required />

8、alt：定義圖像輸入的替代文本。 (只針對(duì)type="image")

屬性值：text

<input type="image" src="submit.gif" alt="Submit" width="48" height="48" />

9、autocomplete（new）：autocomplete 屬性規(guī)定輸入字段是否應(yīng)該啟用自動(dòng)完成功能。

屬性值：on/off，默認(rèn)啟動(dòng)自動(dòng)完成功能。

<input autocomplete="off" />

注意：autocomplete 屬性適用于下面的 <input> 類型：text、search、url、tel、email、password、datepickers、range 和 color。

10、autofocus（new）：屬性規(guī)定當(dāng)頁(yè)面加載時(shí) <input> 元素應(yīng)該自動(dòng)獲得焦點(diǎn)。

屬性值：autofocus

<input type="text"  autofocus />

11、checked：checked 屬性規(guī)定在頁(yè)面加載時(shí)應(yīng)該被預(yù)先選定的 <input> 元素。 (只針對(duì) type="checkbox" 或者 type="radio")

屬性值：checked

<input type="checkbox" name="vehicle" value="Car" checked />小汽車

12、disabled：disabled 屬性規(guī)定應(yīng)該禁用的 <input> 元素。

屬性值：disabled

<input type="text" name="lname" disabled />

13、form（new）: form 屬性規(guī)定 <input> 元素所屬的一個(gè)或多個(gè)表單。

位于 form 表單外的輸入字段（但仍然屬于 form 表單的一部分）：

<form action="demo-form.php" id="form1">
    First name: <input type="text" name="fname"><br>
   <input type="submit" value="提交">
</form>

14、formaction（new）:屬性規(guī)定當(dāng)表單提交時(shí)處理輸入控件的文件的 URL。(只針對(duì) type="submit" 和 type="image")

屬性值：URL

<input type="submit" formaction="demo-admin.php" value="提交" />

注意：

formaction 屬性規(guī)定當(dāng)表單提交時(shí)處理輸入控件的文件的 URL。

formaction 屬性覆蓋 <form> 元素的 action 屬性。

15、formenctype（new）：屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到服務(wù)器時(shí)如何編碼(只適合 type="submit" 和 type="image")。

屬性值：application/x-www-form-urlencoded ；multipart/form-data text/plain

<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交" />

注意：

formenctype 屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到服務(wù)器時(shí)如何編碼（僅適用于 method="post" 的表單）。

formenctype 屬性覆蓋 <form> 元素的 enctype 屬性。

16、formmethod （new）：定義發(fā)送表單數(shù)據(jù)到 action URL 的 HTTP 方法。 (只適合 type="submit" 和 type="image")

屬性值：get / post

<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交" />

17、formnovalidate（new）：formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。

屬性值：formnovalidate

<input type="submit" formnovalidate="formnovalidate" value="不驗(yàn)證提交">

18、formtarget （new）:規(guī)定表示提交表單后在哪里顯示接收到響應(yīng)的名稱或關(guān)鍵詞。(只適合 type="submit" 和 type="image")

屬性值：_blank； _self； _parent； _top； framename

<input type="submit" formtarget="_blank" value="提交到一個(gè)新的頁(yè)面上">

19、height （new）;width（new）:屬性規(guī)定 <input> 元素的高度和寬度。 (只針對(duì)type="image")

屬性值：pixels

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48" />

20、max （new）;min（new）:屬性規(guī)定 <input> 元素的最大值和最小值。

屬性值：number；date

 <input type="date" name="bday" max="1979-12-31">
  <input type="date" name="bday" min="2000-01-02">  
<input type="number" name="quantity" min="1" max="5">

21、multiple （new）：屬性規(guī)定允許用戶輸入到 <input> 元素的多個(gè)值。

屬性值：multiple

<input type="file" name="img" multiple>

注意：multiple 適用于以下 input 類型：email 和 file。

22、pattern （new）：pattern 屬性規(guī)定用于驗(yàn)證 <input> 元素的值的正則表達(dá)式。

屬性值：regexp;

<form action="demo_form.html">
   Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
   <input type="submit">
</form>

23、placeholder （new）： 屬性規(guī)定可描述輸入 <input> 字段預(yù)期值的簡(jiǎn)短的提示信息 。

屬性值：text

<input placeholder="請(qǐng)輸入姓名" />

24、src : src 屬性規(guī)定顯示為提交按鈕的圖像的 URL。 (只針對(duì) type="image")

屬性值：URL

<input type="image" src="submit.gif" alt="Submit" />

25、step （new）: step 屬性規(guī)定 <input> 元素的合法數(shù)字間隔。

屬性值：number

<input type="number" name="points" step="3">

26、list（new） :屬性引用 <datalist> 元素，其中包含 <input> 元素的預(yù)定義選項(xiàng)。

屬性值：datalist_id

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

27、type: type 屬性規(guī)定要顯示的 <input> 元素的類型。

屬性值：button；checkbox；color；date；datetime；datetime-local；email；file；hidden；image；month；number；password；radio；range；reset；search；submit；tel；text；time；url；week

type的屬性值眾多，也是用的比較多的一個(gè)。

button：定義可點(diǎn)擊的按鈕（通常與 JavaScript 一起使用來啟動(dòng)腳本）。

checkbox：定義復(fù)選框。

color（new）：定義拾色器。

date（new）：定義 date 控件（包括年、月、日，不包括時(shí)間）。

datetime（new）：定義 date 和 time 控件（包括年、月、日、時(shí)、分、秒、幾分之一秒，基于 UTC 時(shí)區(qū)）。

datetime-local（new）：定義 date 和 time 控件（包括年、月、日、時(shí)、分、秒、幾分之一秒，不帶時(shí)區(qū)）。

email（new）：定義用于 e-mail 地址的字段。file定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳。

hidden：定義隱藏輸入字段。

image：定義圖像作為提交按鈕。

month（new）：定義 month 和 year 控件（不帶時(shí)區(qū)）。

number（new）：定義用于輸入數(shù)字的字段。

password：定義密碼字段（字段中的字符會(huì)被遮蔽）。

radio：定義單選按鈕。

range（new）：定義用于精確值不重要的輸入數(shù)字的控件（比如 slider 控件）。

reset：定義重置按鈕（重置所有的表單值為默認(rèn)值）。

search（new）：定義用于輸入搜索字符串的文本字段。

submit：定義提交按鈕。

tel（new）：定義用于輸入電話號(hào)碼的字段。

text：默認(rèn)。定義一個(gè)單行的文本字段（默認(rèn)寬度為 20 個(gè)字符）。

time（new）：定義用于輸入時(shí)間的控件（不帶時(shí)區(qū)）。

url（new）：定義用于輸入 URL 的字段。

week（new）：定義 week 和 year 控件（不帶時(shí)區(qū)）。

篇文章主要的向大家介紹了關(guān)于html input標(biāo)簽的單選按鈕的使用方法，還有關(guān)于HTML input標(biāo)簽的單選默認(rèn)按鈕的做法。接下來我們一起來看看這篇文章吧

首先我們介紹的是在html input標(biāo)簽中的單選按鈕的做法：

<input> 標(biāo)簽用于搜集用戶信息。根據(jù)不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。

話不多說，上代碼實(shí)例：

> <form action="form_action.asp" method="get">
> 
> <input type="radio" name="radio" value="1">單選1
> 
> <input type="radio" name="radio" value="2">單選2
> 
> <input type="radio" name="radio" value="3">單選3
> 
> <input type="radio" name="radio" value="4">單選4
> 
> </form>

這個(gè)的效果很容易看到，我們還是先看看瀏覽器中的顯示效果吧：

這個(gè)效果一眼就能看到，很簡(jiǎn)單的一個(gè)代碼

還有種是很多網(wǎng)站上都是經(jīng)常見到的，比如：?jiǎn)芜x性別，這個(gè)基本上都是用這種單選框去制作的。代碼如下：

HTML中的單選按鈕實(shí)現(xiàn)男女性別選擇，不讓男女同是都能都能選擇，實(shí)現(xiàn)方法：在按鈕的屬性里寫一個(gè)name屬性，并且把name的值設(shè)置成相同的

> <input id="man" type="radio" checked="checked" name="1" />男
> 
> <input id="woman" type="radio" name="1"/>女

這個(gè)就不給圖了，比上面那個(gè)還簡(jiǎn)單，就兩個(gè)單選框，我們經(jīng)常遇到的這個(gè)。

現(xiàn)在來說說HTML單選框按鈕怎么默認(rèn)選中：

首先我們先把第一個(gè)實(shí)例拿出來繼續(xù)說，我們只需要在其中加一個(gè)屬性，如下：

> <form action="form_action.asp" method="get">
> 
> <input type="radio" name="radio" value="1">單選1
> 
> <input type="radio" name="radio" value="2" checked>單選2
> 
> <input type="radio" name="radio" value="3">單選3
> 
> <input type="radio" name="radio" value="4">單選4
> 
> </form>

效果依舊很明顯，看效果圖：

這上面我沒做任何的點(diǎn)擊，自己出現(xiàn)在那上面的，刷新過后還能看到在單選2上面。

我們就可以看到，這樣就把單選框給默認(rèn)選中了，大家可以自己試試，多敲敲代碼。

好了，以上就是這篇關(guān)于html input標(biāo)簽做單選按鈕的文章了，有問題的可以在下方提問。

以上就是html單選按鈕默認(rèn)選中怎么做？input標(biāo)簽的單選按鈕用法實(shí)例的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注我！！！

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個(gè)月整理了一份最適合2020年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。