HTML表单元素如何使用

魁首哥

作者

HTML表单元素如何使用

这篇文章主要介绍了HTML表单元素如何使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML表单元素如何使用文章都会有所收获，下面我们一起来看看吧。

这个算是Html中的重中之重了，因为用的比较多，基本上所有的表单元素都包含在Form标签中。每一个表单中的空间要么独立存在，要么处于Input中，下面我们来详细了解下：

<formaction=''method='get'accept-charset=""target=""autocomplete=""enctype=""novalidate><fieldset>#字段组<legend>表单数据</legend>字段组名表单控件的标记<labelfor='sex'>for必须指向id<inputtype="text"name="sex"id='sex'></label>文本输入框：<inputtype="text">密码输入框：<inputtype="password"name="">单选框：<inputtype="radio"name="性别"value="男"checked><inputtype="radio"name="性别"value="女">多选框：<inputtype="checkbox"name="爱好"value='踢足球'><inputtype="checkbox"name="爱好"value='打篮球'><inputtype="checkbox"name="爱好"value='打排球'><inputtype="checkbox"name="爱好"value='羽毛球'><inputtype="checkbox"name="爱好"value='橄榄球'>按钮：<button>button1</button>下拉列表：<selectname='seq'><option>1</option><option>2</option><option>3</option><option>4</option></select>文本域：<textareaname='area'rows=10cols=20>行占10个字符列占20个字符，一个汉字等于两个字符helloworld</textarea>菜单：<menutype="list">列表菜单还有上下文菜单(context)工具栏菜单(toolbar)<menulabel="文件"><buttontype="button">新建</button><buttontype="button">打开</button><buttontype="button">退出</button></menu></menu><menutype="context"id="menu"><menuitemlabel="menu"type='checkbox'icon="1.png">多选菜单项目还有单选(radio)和命令(command)</menuitem></menu><inputtype="button"name=""value='button2'>提交：<inputtype="submit"name=""value="Submit"></fieldset>Html5表单类型预定义选项列表<inputlist="rice"><datalistid="rice"><optionvalue="1"><optionvalue="2"><optionvalue="3"><optionvalue="4"><optionvalue="5"></datalist>表单的密钥对生成器字段当提交表单时，私钥存储在本地，公钥发送到服务器。<keygenname="security"keytype="rsa"disabled="disabled"/>输入框只允许数字输入<inputtype="number">日期<inputtype="date"name="">颜色<inputtype="color"name="">范围<inputtype="range"name="">月份和年份<inputtype="month"name="">星期和年份<inputtype="week"name="">时间<inputtype="time"name="">日期时间选择(有时区)<inputtype="datetime"name="">日期时间选择(无时区)<inputtype="datetime-local">邮箱<inputtype="email"name="">搜索<inputtype="search"name="">电话<inputtype="tel"name="">url<inputtype="url"name=""></form>action：处理表单数据的服务器脚本语言（如php）method：请求方法如getpostaccept-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提示用户该如何正确输入