表单_2

最新推荐文章于 2021-10-05 12:54:15 发布

原创最新推荐文章于 2021-10-05 12:54:15 发布 · 138 阅读

CC 4.0 BY-SA版权

博客介绍了表单的高级应用和初级验证。高级应用包括只读、禁用和隐藏；初级验证涵盖placeholder、required和pattern。placeholder可提示输入内容，required规定必填，pattern要求输入符合正则规则，还给出了正则表达式教程链接。

表单的高级应用

            <p>
				<!-- readonly 只读 不可写 但是提交有效-->
				<input type="text" name="name" value="333" readonly />
			</p>

页面展示：
在这里插入图片描述

            <p>
				<!-- disabled 禁用 该input无效-->
				<input type="text" name="userName1" disabled />
			</p>

页面展示：
在这里插入图片描述

            <p>
				<!-- hidden 隐藏 但是提交有效 -->
				<input type="url" name="url" value="http://www.baidu.com" hidden />
			</p>

代码展示：
在这里插入图片描述

适合input标签：text、search、url、email、password等类型
可以描述文本框期待用户输入何种内容
提示语默认显示，当文本框中输入内容时提示语消失

<input type="text" name="userName" placeholder="请输入用户名"/>

页面展示：
在这里插入图片描述

规定文本框填写内容不能为空，否则不允许用户提交表单
适合input标签：text、search、url、email、password、number、radio、checkbox、file等类型

<input type="text" name="userName" placeholder="请输入用户名" required/>

页面展示：
在这里插入图片描述

用户输入的内容必须符合正则表达式所指的规则，否则不能提交表单

            <p>
				手机号码
				<input type="text" name="phoneNum" pattern="1[3578]\d{9}" required>
				密码长度为11位，以13|5|7|8开头	
			</p>

页面展示：
在这里插入图片描述
正则表达式教程：
https://www.runoob.com/regexp/regexp-tutorial.html