目錄

• 表單
• 文本輸入框
• 密碼輸入框
• 單選按鈕（Radio Buttons）
• 復選框（Checkboxes）
• 下拉框
• 重置 / 提交 按鈕
• 大的文本框(文本域)
• 上傳文件按鈕
• 顏色按鈕
• 生日表單
• 郵件框
• 數字框
• 進度條框
• 搜索框
• 電話框
• 組合表單
• 定義選項列表
• 按鈕
• URL
• 增強鼠標可用性
• 表單的初級驗證

表單

表單用<from>標簽頁來使用

• action:表單提交的位置，可以使網站，也可以是一個請求處理地址。
• methed: post/get提交方式
  • get方式提交:我們可以在url中看到我們提交的信息，不安全，高效。
  • post:比較安全，傳輸大文件。

表單的域：

• 隱藏域 hidden
• 只讀域 readonly
• 禁用域 disabled

例子: <form action="2.html" method="post"><p>賬號:<input type="text" name="username"> </p> </form>

文本輸入框

• input type=“text”
• value=“值” , 默認初始值
• maxlength=“大小” , 最長能寫幾個字符
• size=“大小” , 文本框的長度

輸入你的名字:<input type="text" name=""> <br> 輸入你的名字:<input type="text" name="" style="width:200px; height:30px; font-size:15px;" placeholder="輝小歌">

密碼輸入框

<form>密碼:<input type="password" name=""> </form>

單選按鈕（Radio Buttons）

就是多選一，你選性別的時候不能即是男又是女。

• input type=“radio”
• value , 單選框的值
• name , 表示組
  

<form>男:<input type="radio" name="sex" value="male"><br>女:<input type="radio" name="sex" value="female"></form>

復選框（Checkboxes）

定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。

愛好：<br><form><input type="checkbox" name="" value="">游泳<br><input type="checkbox" name="" value="">打游戲<br><input type="checkbox" name="" value="">編程<br></form>

設置默認全選:

愛好：<br> <form><input type="checkbox" name="" value="" checked="checked">游泳<br><input type="checkbox" name="" value="" checked="checked">打游戲<br><input type="checkbox" name="" value="" checked="checked">編程<br> </form>

下拉框

<form action="">地區:<select name="area"><option value="">河北</option><option value="">浙江</option><option value="" selected>北京</option> <!-- 設置默認選項 --><option value="">西藏</option></select> </form>

重置 / 提交 按鈕

點擊重置按鈕，所有填的信息都會清空。提交按鈕就是提交。

<input type="reset" name=""> <br><br> <input type="submit" name="" value="提交">

大的文本框(文本域)

<textarea cols="80" rows="5"></textarea>

上傳文件按鈕

請上傳文件: <input type="file" name="" id=""><br/>

顏色按鈕

顏色: <input type="color" name="" id=""><br/>

生日表單

生日: <input type="date" name="" id="">

郵件框

郵件： <input type="email" name="">

數字框

體重: <input type="number" name="" id=""> <input type="number" name="" min="1" max="100" step="10"> <!--設置最小值 最大值 步長-->

進度條框

音量：<input type="range" name="" id="">

搜索框

<form> 搜索<input type="search" name="" id=""> </form>

電話框

<form>phone:<input type="tel" name="" id=""> </form>

組合表單

<fieldset><legend>擅長的技術</legend>C++<input type="checkbox" name="" >C語言<input type="checkbox" name=""/>算法<input type="checkbox" name=""/> </fieldset>

定義選項列表

<datalist> 標簽定義選項列表

國家： <input name="" id="" type="text" list="id1" /><br/> <datalist id="id1"><option value="China">中國</option><option value="USA" selected>美國</option><option value="Australia">澳大利亞</option> </datalist>

按鈕

• input type=“button” 普通按鈕
• input type=“image” 圖像按鈕
• input type=“submit” 提交按鈕
• input type=“reset” 重置按鈕

URL

<input type="url" name="url">

增強鼠標可用性

點擊可以跳轉到對應的id處

<p>密碼:<input type="password" name="pwd" id="wer"></p> <label for="wer">你點我試試</label> <!--for 里面是id 點擊跳轉到對應的id 處-->

表單的初級驗證

表單為啥要驗證？
減少服務器的壓力，保證數據的安全性。
常用方式:

• placeholder 提示信息
• required 非空判斷
• pattern 正則表達式

總結

以上是生活随笔為你收集整理的HTML之表单的全部內容，希望文章能夠幫你解決所遇到的問題。

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