<form>表单
<form method="post" action="result.html">
<p> 名字:<input name="name" type="text" > </p>
<p> 密码:<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
<form>表单标签,声明我要写一个表单
<method>提交方式(get/post)post来说相对更安全
<action>提交路径(html页面无法直接向数据库提交,会提交到java)
属性 | 说明 |
type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button,默认为 text |
name | 指定表单元素的名称 |
value | 元素的初始值。type 为 radio时必须指定一个值 |
size | 指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 |
maxlength | type为text 或 password 时,输入的最大字符数 |
checked | type为radio或checkbox时,指定按钮是否是被选中 |
<button>按钮标签
<select>
<option>下拉列表(selected默认选中值)
<textarea>多行文本框 cols设置宽度rowss设置高度
<input />
name 指定表单元素的名称
size 表单元素的初始宽度
maxlength输入的最大字符数
checked type为radio或checkbox,指定按钮被选中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人人网注册页面</title>
</head>
<body>
<form>
<img src="img/renren_titile.gif" />
<p>人人网,中国 最真实、最有效的社会平台,加入人人网,找回老朋友,结交新朋友。</p>
电子邮箱:<input type="text" />
<br />
设置密码:<input type="password" />
<br />
真实姓名:<input type="text" />
<br />
性别:<input type="radio" name="1"checked/>男
<input type="radio" name="1"/>女
<br />
生日:<select name="lb" size="1">
<option value="moren" selected >1991</option >
</select>年
<select name="lb1" size="1">
<option value="moren" selected >11</option >
</select>月
<select name="lb2" size="1">
<option value="moren" selected >30</option >
</select>日
<br />
为什么要填写我的生日?
<br />
我现在:<select name="lb3"size="1">
<option>请选择身份</option>
<option>医生</option>
<option>老师</option>
</select>(非常重要)
<br />
<img src="img/renren_code.gif" />
<a href="#">看不清换一张?</a>
<br />
验证:<input type="text" />
<br />
<input type="image"src="img/renren.gif" />
</form>
</body>
</html>
type文本类型
text文本框
password密码框(输入的时候看不到输入内容)
radio单选框 (name名字必须一致,checked默认选择)
checkbox多选框(name名字必须一致,checked默认选择)
button:普通按钮
image: 图片按钮
reset: 重置按钮
submit: 提交按钮
file:文件域 (必须在form标签中添加enctype="multipart/form-data",一般上传头像都是用这个)
email: 邮箱
url: 网址
search: 搜索框
number: 数字框 min最小值 max最大值 step步长(
range: 滑块 min最小值 max最大值 step步长
tel: 电话号
datetime-local: 日期选择
color: 选择颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网易邮箱登录界面</title>
</head>
<body>
<table>
<tr>
<td><img src="img/163logo.gif"/></td>
<td >免费邮 企业邮 VIP邮箱 帮助</td>
</tr>
<tr>
<td ><img src="img/imap.jpg"/></td>
<td><p><form><fieldset><img src="img/loginIcon.gif"/><strong>普通登录</strong></p>
<p>版本:
<select name="列表" size="1">
<option value="moren" selected >非默认</option >
<option value="feimoren" selected>默认</option>
</select>
</p>
<p>
<input name="gen" type="radio" value="自动登录" />自动登录
<input name="gen" type="radio" value="SSL " checked />SSL
</p>
<input type="submit"value="登录" />
<input type="submit" value="注册"/></td></fieldset></form>
</tr>
<tr>
<td><ul>
<li>163/126/yeah三大免费邮箱均默认开放</li>
<li>全面支持iPhone/iPad及Android等系统</li>
<li>客户端、手机与网页,实现发送、阅读邮件</li>
</ul></td>
</tr>
<tr>
<td><img src="img/netease_logo.gif" /></td>
<td>关于网易 免费邮 官方博客 客户服务 隐私政策 网易公司版权所有 ©2015-2018</td>
</tr>
</table>
</body>
</html>
表单的高级应用
隐藏域
<input type="hidden" value="666" name="userid">
只读
<input name="name" type="text" value="张三" readonly>
禁用
<input type="submit " disabled value="保存" >
表单元素的标注
<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>
id相同,可以点击标注的文本来实现点击选项框的效果
<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>
文本框输入内容提示
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
required规定文本填写内容不为空
placeholder提示词
pattern可以验证规则,符合正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<img src="img/bg_chs.png"/>
<h1>注册账户</h1>
<p>
<label for="1">昵称</label><input type="text" id="1"required pattern="[-\w\u4E00-\u9FA5]{4,10}"/>
</p>
<label for="2">密码</label><input type="password" id="2" required pattern="^[\dA-Za-z]{6,16}$"/>
<p>
<label for="3">确认密码</label><input type="password" id="3"required pattern="^[\dA-Za-z]{6,16}$"/>
</p>
<label for="4">手机号码</label><input type="tel" id="4" required pattern="1[3578]\d{9}"/>
<p>
<label for="5">邮箱</label><input type="email" id="5" required/>
</p>
<label for="6">年龄</label><input type="text" id="6" required pattern="\d|[1-9]\d|1[0-2]\d"/>
<p>
<input type="image"src="img/btn.bmp" />
</p>
</form>
</body>
</html>
<