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表单元素如何使用”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网VUE频道。