西安做网站哪家最便宜,广州免费核酸检测地点,网站设计是什么意思,集团网站群建设前言
前端页面开发中#xff0c;html表单是网页中最常见元素之一#xff0c;通过form元素定义表单,表单中包含各种表单项。
input 元素可以用来生成一个供用户输入数据的简单文本框。 在默认的情况下#xff0c; 什么样的数据均可以输入。而通过不同的type属性值#xff…前言
前端页面开发中html表单是网页中最常见元素之一通过form元素定义表单,表单中包含各种表单项。
input 元素可以用来生成一个供用户输入数据的简单文本框。 在默认的情况下 什么样的数据均可以输入。而通过不同的type属性值可以限制输入的内容。
代码实例
input typetext nameuserName required 定义一个单行输入文本框。forminput typetext nameyournamesize30 maxlength20 readonly value你只能读不能修改
/form
常见的type属性值
1、text 一个单行文本框默认属性值 2、password 隐藏字符的密码框 3、search 搜索框在某些浏览器中输入内容会出现叉形标记 4、submit、reset、button 依次是提交按钮、重置按钮、普通按钮 5、number、range 依次是只能输入数值的框、只能输入在一个指定范围的数值框 6、checkbox 复选框一组复选框(name属性值相同)用户可以勾选多个其中name的值可写可不写可以一致也可以不一致 没有多大影响。但是必须设置value值。checked“checked”设置单选框默认选中项。
radio 单选按钮一组单选按钮(name属性值要相同)用户只可以选中一个 其中name的值必须一致否则将不能进行单选会全部选中。 7、image、图片按钮 8、email 检测电子邮件 9、hidden 生成一个隐藏控件通常称为隐藏域 10、file 生成一个上传控件 它们的属性参数【可选】
1、type”text” 1list 指定为文本框提供建议值的 datalist 元素其值为datalist 元素的 id 值 2maxlength 设置文本最大字符长度 3pattern 用于输入验证的正则表达式 4placeholder 输入提示的文本当用户输入内容时会自动消失 5readonly 文本框处于只读状态 6disabled 文本框处于禁用状态 7size 设置文本框宽度 8value 设置文本框初始值会显示在文本框中显示时优先级比placeholder高表单提交时优先提交用户输入的内容如果用户没有输入则提交默认的值 9required 表示用户必须输入一个值否则无法通过输入验证
2、type”password”和type”text”时所拥的额外属性基本一致少了一个list属性
3、type”search” 和type”text”所有用的额外属性值一致
4、type分别为submit、reset、button表示提交表单、重置表单、普通按钮
5、当type为number、range时 type”number” 只能输入数字的文本框 type”range” 生成一个通过拖拽调节大小的调节器
额外属性 1min 设置可接受的最小值 2max 设定可接受的最大值 3value 指定初始值 4step 指定上下调节值的步长 5required 表明用户必须输入一个值否则无法通过输入验证 6readonly 设置文本框内容只读
6、当type为checkbox、radio 1不管type等于checkbox还是radio都必须有属性name和value 2他们还有可选属性checked、required 注意复选框和单选按钮都是以一组一组的形式存在name值相同的即为一组一组复选框可以同时选中几个而一组单选按钮同时只能选中一个。
7、当type为image 当type”image”时功能上和type”submit”一样前者是用图片作为按钮当然后者也可以达到同样的效果。 额外属性 1src 指定要显示图像的 URL 2alt 提供图片的文字说明当图片找不到时显示该文字 3width 图像的长度注意这是标签属性而不是样式属性 4height 图片的高度
8、当type为email 为电子邮件格式
9、type”hidden” 1生成一个隐藏控件一般用于表单提交时关联主键 ID 提交而这个数据作为隐藏存在
10、type”file” 生成一个文件上传控件用于文件的上传。 额外属性 1required 表明用户必须提供一个值否则无法通过验证 2accept 指定接收的MIME类型 例如accept”image/gif, image/jpeg, image/png”
注意当需要上传文件时form标签的enctype属性必须设置为multipart/form-data html5新增的表单type属性值
1.type“email”
typeemail属性验证只能输入邮箱格式否则不能通过email:input typeemail nameuserEmail2. type“tel” typetel不进行验证主要是在移动端打开数字键盘 电话input typetel nametel
3.type“url”
type“url” 验证只能输入合法的网址必须包含http://
网址input typeurl nameurl
4.type“range”
type“range”产生一个滑动条 范围input typerange namerange min1 max10 value7
5.type“search”
type“search”使搜索框更人性化提供删除“X”符号来快速清除所输入的内容
6.type“date”
type“date”日期框可以选择年、月、日
7.type“time”
type“time”可以选择时、分、秒
8.type“datetime-local”
type“datetime-local”选择年月日和现在的时刻
9.type“number”
type“number”:只能输入数字的数字框包含小数点 value时为当前值
数字1到8之间input typenumber name数字 min1 max10 value5html5新增的表单属性
1.required
required:限制用户该项为必填项不能为空。
2.placeholder
placeholder:给input输入框添加默认提示信息
3.autofocus
autofocus自动获取焦点。
4.autocomplete
autocomplete“on”显示历史记录autocomplete“off”不显示历史记录 使用自动完成必须同时满足两个条件 1.必须成功提交过 2.当前添加autocomplete的元素必须有name属性
5.novalidate
在 input输入类型当提交表单时会对这些输入内容进行验证。novalidate属性:在提交表单时不对form或input进行验证。
6.multiple
multiple属性用在type值为email和file的input类型中设置了multiple值后可以在input中输入多个值比如在email中输入多个邮箱中间用逗号隔开。注意在选择文件的时候要按住Ctrl键才能同时选择多个文件
7.pattern
pattern:正则表达式,由一系列字符和数字组成用于匹配某个句法规则.属性适应于text、search、url、telephone、email和password类型的input元素。
8.form
在之前当我们需要写form表单的时候必须把form的控件写在form/form双标签中。现在我们可以脱离form的双标签写在其他控件只需要在末端加上主要的form表单的id就可以了。
form action# methodpost idmyforminput typetext autofocus/input typebutton value提交/forminput typeemail placeholder请输入你的邮箱 formmyform
