首页 网络技术
  1. 正文

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 postaccept-charset:提交表单时的字符编码 如utf-8target:页面跳转方式autocomplete:自动完成表单 off关闭 on开启enctype:表单数据的编码 如application/x-www-form-urlencoded(默认),multipart/form-data(文件上传),text/plainnovalidate:浏览器不验证表单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
 提交表单时处理该输入控件的文件的URLform
 规定input元素所属的一个或多个表单autofocus
 当页面加载时自动获得焦点disabled
 输入字段应该被禁用max
 输入字段的最大值maxlength
 输入字段的最大字符数min
 输入字段的最小值pattern
 通过其检查输入值的正则表达式readonly
 输入字段为只读required
 输入字段是必需的size
 输入字段的宽度step
 输入字段的合法数字间隔value
 输入字段的默认值multiple
 常用于邮箱和文件,可多个上传文件placeholder
 提示用户该如何正确输入

本文标题:HTML表单元素如何使用
本文链接:https://www.qqooo.cn/post/6442.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!