创建表单

创建表单

表单

	<form action="" method="post">
	<p>用户名：<input name="user" id="name" type="text" size="15" /></p>
	<p>密码：  <input name="password" type="password" size="15" /></p>
	<p>性别： 男 <input type="radio" name="sex" value="1"  checked />
	 		女 <input type="radio" name="sex" value="2"  /></p>
	<p>爱好：<input name="fav1" type="checkbox" value="1"/>跳舞
			<input name="fav1" type="checkbox" value="2"/>散步	
			<input name="fav1" type="checkbox" value="3"/>唱歌</p>
	<p>所在地：<select name="addr">
				<option value="1">河北</option>
				<option value="2">北京</option>
				<option value="3">天津</option>
			</select></p>
	<p>个性签名：<br/><textarea name="sign"></textarea></p>
	<p><input type="submit" name="submit" value="提交"/></p>
	</form>

表单三要素

• form标记
• 至少一个输入域（如input文本域或选择框）
• 提交按钮

input标记type属性取值含义

• text 文本框 value=“请输入关键字”也可以为空
• password 密码框
• radio 单选框 checked默认选择
• checkbox 复选框
• file 文件域
• hidden 隐藏域 隐藏域不会显示在网页中，但是提交表单时会一起提交到服务器（必须有name属性和value属性）
• submit 提交按钮
• reset 重置按钮
• button 普通按钮
• image 图像按钮

表单的辅助标记

• label标记 定义标签，通过for属性绑定控件，如果表单控件的id属性和label标记的for属性相同，那么label标记就会和表单控件关联起来。
• 字段集标记fieldset、legend

HTML5新增的表单标记和属性

• input属性新增类型值

   网址输入框   <input type="url">
   email输入框   <input type="email">
   数字输入框   <input type="number">
   日期输入框   <input type="date">
   搜索输入框   <input type="search">
   范围滑动条   <input type="range">
  

• input标记新增的公共属性

    autofocus   <input autofocus="true">   设置元素自动获得焦点
    pattern     <input pattern="正则表达式">   使用正则表达式验证，例如：pattern="^[a-zA-Zw(5,7)$]"
    placeholder   <input placeholder="默认内容">  设置文本框里的默认内容
    required   <input required="true">   是否检测文本框输入框的内容为空
    novalidate  <input novalidate="true">  是否验证文本输入框的内容
    autocomplete  <input autocomplete="on">  使form或input具有自动完成功能