html学习笔记6——文本框、<input>扩展用法和<lable>增强鼠标可用性

文本框

<textarea name="textarea" cols="50" rows="5"></textarea>

< input>扩展用法

<input type="" name="" step="" placeholder="">

required 规定字段为必须填写的
readonly 规定字段只读
hidden 隐藏元素
disabled 禁用元素
step 给输入框提供了一个上下点的按钮,比如输入1点上变6;给滑块提供了最小滑动值
placeholder 显示提示用户输入文字
autofocus 自动将输入焦点定位到需要的元素(input|textarea|button)
type类型
​ search 搜索框
​ number 只能输数字
​ tel 只能输号码
​ email 只能输邮箱
​ url 只能输网址
​ range 创建滑块
​ color 拾色器
​ file 文件上传接口

使用正则规范

<input type="" pattern="">

在pattern中输入正则表达式限制输入值格式(type应为text|search|url|tel|email|password)
正则练习网站

获取时间

<input type="">

date 定义日期控件(年、月、日)
datetime 增加时间控件(年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)
datetime-local 无时区
month 定义年、月控件
week 定义年、周控件

< lable>

<input type="submit" id="submit">
<label for="submit">点击提交</label>

lable可以将焦点转到和标签相关的表单控件上,相当于表单元素的延伸

注解

name与id的区别

name是用来提交数据的,提供给表单用,可以重复;id则针对文档操作时候用,不能重复。

以下元素input、select、form、frame、iframe用name,而以下元素table、tr、 td、div、p、span、h1、li用id。表单元素与框架元素用 name,这些元素都与表单|框架元素作用于form的target提交有关, 在表单的接收页面只接收有name的元素, 赋ID的元素通过表单接收不到值。

猜你喜欢

转载自blog.csdn.net/jgjfror/article/details/114298219