表单相关属性的使用

来源：互联网发布：知乎量子纠缠与超光速编辑：程序博客网时间：2024/05/17 18:24

autofocus

代码：

<!doctype html><html><head><meta charset="utf-8"><title>autofocus的用法</title></head><body><form action="ceshi.asp" method="get">用户名：<input type="text" name="xm" /><br><p></p>性别：<input type="text" name="xb" autofocus="autofocus"/><br><p></p><input type="submit"/></form></body></html>

结果：autofocus会自动对焦到text所在框中

form

代码：

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><form action="address的用法.html" id="user_form" method="get"><input type="text" name="姓名"/><input type="submit"/></form><p>其他布局内容</p><p>其他布局内容</p><p>其他布局内容</p><p>其他布局内容</p><input type="text" sex="性别" form="user_form"/></body></html>

结果：

formoverrides

代码：

<!doctype html><html><head><meta charset="utf-8"><title>formoverrides的用法</title></head><body><form action="address的用法.html" method="get" id="user_form">邮箱<input type="email" name="userid"/><br/><p></p><input type="submit" value="提交"/><br/><p></p><input type="submit" formaction="article用法.html" value="以管理员身份提交"/><br/><p></p><input type="submit" formnovalidate value="提交不用验证"/><br/></form></body></html>

结果：

如果邮箱格式不正确，“提交”和“以管理员身份提交”会显示正确的输入格式，而“提交不用验证”不会提示，直接到达响应页面

点击“提交”按钮后的结果

点击“以管理员身份提交”后的结果

height和width

代码：

<!doctype html><html><head><meta charset="utf-8"><title>image标签中height和width的用法</title></head><body><form action="address的用法.html" method="get">用户名：<input type="text" name="yh"/><br/>图片：<input type="image" src="images/3.jpg" width="99" height="80"/></form></body></html>

运行代码时的结果

点击图片后的结果：

list

代码：

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><form action="address的用法.html" method="get">主页<input type="url" list="dl" name="link"/><datalist id="dl"><option label="baidu" value="http://www.baidu/com"/><option label="qq" value="http://www.qq.com"/></datalist></form></body></html>

结果：

选择“baidu” 选择“baidu”后的结果

max min step

代码：

<!doctype html><html><head><meta charset="utf-8"><title>max min step的用法</title></head><body><form action="cx.html" method="get">成绩：<input type="number" name="points" max="10" min="0" step="3"/><input type="submit"/></form></body></html>

结果：

只有输入step=3的倍数时，值才是有效的。

multiple

代码：

<!doctype html><html><head><meta charset="utf-8"><title>multiple的用法</title></head><body><form action="ceshi.asp" method="get">选择图片：<input type="file" name="tupian" multiple="multiple"/><input type="submit"/></form></body></html>

结果：

pattern

代码：

<!doctype html><html><head><meta charset="utf-8"><title>pattern的用法</title></head><body><!--pattern中[]限制输入内容；{}限制输入长度--><form action="ceshi.asp" method="get"><!--pattern表示允许输入的内容是0-9，只能输入四位数-->河南电话区号：<input type="text" name="quhao" pattern="[0-9]{4}"/><br/><p></p><!--pattern表示允许输入的内容是数字0-9，小写字母a-z,大写字母A-Z，以及特殊符号&*（）,允许输入的长度为6位数-->用户名：<input type="text" name="yonghu" pattern="[0-9a-zA-Z&*()]{6}"?><input type="submit"/></form></body></html>

结果：

placeholder

代码：

<!doctype html><html><head><meta charset="utf-8"><title>placeholder的用法</title></head><body><form action="ceshi.asp" method="get"><input type="text" name="yonghu" placeholder="用户的姓名"/><input type="password" name="mima" placeholder="用户的密码"/><input type="submit"/></form></body></html>

结果：

给用户一些输入的提示信息

required

代码：

<!doctype html><html><head><meta charset="utf-8"><title>required的用法</title></head><body><form action="ceshi.asp" method="get">用户名：<input type="text" name="yonghu" required="required"/><input type="submit"/></form></body></html>

结果：

填写内容不允许为空

阅读全文

0 0