HTML表單元素如何使用

這篇文章主要介紹了HTML表單元素如何使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇HTML表單元素如何使用文章都會有所收獲，下面我們一起來看看吧。

這個算是Html中的重中之重了，因為用的比較多，基本上所有的表單元素都包含在Form標簽中。每一個表單中的空間要么獨立存在，要么處于Input中，下面我們來詳細了解下：

<form action='' method='get' accept-charset="" target="" autocomplete="" enctype="" novalidate>
<fieldset> #字段組
<legend>表單數據</legend> 字段組名
表單控件的標記
<label for='sex'> for必須指向id
<input type="text" name="sex" id='sex'>
</label>
文本輸入框：<input type="text"> 
密碼輸入框：<input type="password" name="">
單選框：<input type="radio" name="性別" value="男" checked>
<input type="radio" name="性別" value="女">
多選框：<input type="checkbox" name="愛好" value='踢足球'>
<input type="checkbox" name="愛好" value='打籃球'>
<input type="checkbox" name="愛好" value='打排球'>
<input type="checkbox" name="愛好" value='羽毛球'>
<input type="checkbox" name="愛好" value='橄欖球'>
按鈕：<button>button1</button>
下拉列表：
<select name='seq'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
文本域：
<textarea name='area' rows=10 cols=20> 行占10個字符 列占20個字符，一個漢字等于兩個字符
hello world
</textarea>
菜單：
<menu type="list"> 列表菜單 還有上下文菜單(context) 工具欄菜單(toolbar)
<menu label="文件">
<button type="button">新建</button>
<button type="button">打開</button>
<button type="button">退出</button>
</menu>
</menu>
<menu type="context" id="menu">
<menuitem label="menu" type='checkbox' icon="1.png"> 多選菜單項目 還有單選(radio)和命令(command)
</menuitem>
</menu>
<input type="button" name="" value='button2'>
提交：<input type="submit" name="" value="Submit">
</fieldset>

Html5表單類型
預定義選項列表
<input list="rice">
<datalist id="rice">
  <option value="1">
  <option value="2">
  <option value="3">
  <option value="4">
  <option value="5">
</datalist> 

表單的密鑰對生成器字段
當提交表單時，私鑰存儲在本地，公鑰發送到服務器。
<keygen name="security"  keytype="rsa" disabled="disabled"/>

輸入框只允許數字輸入
<input type="number">

日期
<input type="date" name="">

顏色
<input type="color" name="">

范圍
<input type="range" name="">

月份和年份
<input type="month" name="">

星期和年份
<input type="week" name="">

時間
<input type="time" name="">

日期時間選擇(有時區)
<input type="datetime" name="">

日期時間選擇(無時區)
<input type="datetime-local">

郵箱
<input type="email" name="">

搜索
<input type="search" name="">

電話
<input type="tel" name="">

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

action：處理表單數據的服務器腳本語言（如php）
method：請求方法 如get post
accept-charset：提交表單時的字符編碼 如utf-8
target：頁面跳轉方式
autocomplete：自動完成表單 off關閉 on開啟
enctype:表單數據的編碼 如application/x-www-form-urlencoded(默認),multipart/form-data(文件上傳),text/plain
novalidate：瀏覽器不驗證表單


formtarget   覆蓋target屬性,用于type="submit"和type="image"。
formnovalidate覆蓋novalidate屬性,用于 type="submit"
formmethod   覆蓋method 屬性,用于 type="submit"以及type="image"
formenctype   覆蓋enctype屬性,用于type="submit"以及type="image",僅針對method="post"的表單
formaction   提交表單時處理該輸入控件的文件的URL
form         規定input元素所屬的一個或多個表單
autofocus     當頁面加載時自動獲得焦點
disabled     輸入字段應該被禁用
max           輸入字段的最大值
maxlength     輸入字段的最大字符數
min           輸入字段的最小值
pattern       通過其檢查輸入值的正則表達式
readonly     輸入字段為只讀
required     輸入字段是必需的
size         輸入字段的寬度
step         輸入字段的合法數字間隔
value         輸入字段的默認值
multiple     常用于郵箱和文件，可多個上傳文件
placeholder   提示用戶該如何正確輸入

關于“HTML表單元素如何使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“HTML表單元素如何使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。