表单_2

表单的高级应用

只读

            <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>

代码展示：

表单的初级验证

placeholder

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

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

页面展示：

required

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

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

页面展示：

pattern

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

            <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