• form ?與用戶進行交互，將瀏覽者的數據傳到服務器端，相當于一個容器

語法：<form method = "傳送方式" ?action = "服務器文件">

解釋：method：數據傳送的方式（get/post），action：瀏覽者輸入的數據被傳送到的地方，比如一個頁面

• 文本/密碼輸入框

語法：<form>

　　　　　　<input type="text" name="名稱" value="文本"/>

　　　　　　<input type="password" name="名稱" value=“文本”>

　　　</form>

?解釋：當type="text"時，輸入框為文本輸入框;?當type="password"時,?輸入框為密碼輸入框；name：為文本框命名，以備后臺程序ASP 、PHP使用。value：為文本輸入框設置默認值。(一般起到提示作用)

• 多行文本輸入框

語法：<textarea rows="行數" cols=“列數”>文本</textarea>

解釋：testarea 標簽是成對出現的，cols 是多行文本框的列數，rows 是多行文本框的行數，文本是設置的默認值

eg:

<form action="save.php" method="post" >
<textarea rows="10" cols="50" >在這里輸入內容...</textarea>
</form>

• 單選框、復選框

語法：<input type="radio/checkbox" value="值" name=“名稱” checked=“checked”>

解釋：radio：單選框，checkbox：復選框；value：提交到后臺的值，name：為控件命名，供后臺使用，當checked設置“checked”時，默認選中

注：同一組單選按鈕，name取值要一致，這樣才能保證單選

• ?下拉列表框(單選)

語法：

<select>

　　<option value="運動1">運動2</option>

　　<option value="看書1" selected="selected">看書2</option>

</select>

解釋：運動1是向服務器提交的值，運動2是頁面顯示的值,selected="selected"默認選中這個值

• 下拉列表框（多選）

語法：在select標簽中設置 multiple=“multiple”

<form>

<select multiple="multiple">
<option value="看書">看書</option>
</select>
</form>

• 提交按鈕/重置按鈕

語法：<input type="submit" value="提交">

解釋：type值設為submit時，按鈕才能提交，valus 是按鈕上顯示的文字

?

語法：<input type="reset" value="重置">

解釋：type值設為reset時，按鈕才有重置功能，valus 是按鈕上顯示的文字

• form表單中的label標簽

解釋：當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就選中和該標簽相關聯的表單控件上面）

語法：<label for="控件id名稱">

<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />

</form>

?

轉載于:https://www.cnblogs.com/huiziz/p/5572344.html

總結

以上是生活随笔為你收集整理的端午小长假--前端基础学起来02与浏览器交互，表单标签的全部內容，希望文章能夠幫你解決所遇到的問題。

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