这篇文章主要介绍了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表单元素如何使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。