HTML（第三章） 标签（空格分隔）： html表单

HTML（第三章）

标签（空格分隔）： html表单

---

表单的提交方式 post、get
在实际网页开发中通常采用post方式提交表单数据

表单语法

<form  method="post" action="数据发送位置">
   <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>

属性	说明
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时，指定按钮是否是被选中

• 单选按钮

<input name="gen" type="radio" value="男"  checked  />男
<input name="gen" type="radio" value="女" />女
<!-- name要书写一致 同一组单选按钮只能有一个默认的checked属性-->

• 复选框

<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
<!-- name属性值相同
同一组复选框中允许有多个复选框有默认的checked属性-->

• 列表框

<select name="列表名称" size="行数">
<option value="选项的值" selected="selected" >…</option >
<option value="选项的值">…</option >
</select>
<!-- 这里selected是默认选中项
     一个<select>中至少包含一个<option>
     一个列表框中只有一个列表项默认选中，没有默认选中则第一个选项默认选中-->

• 按钮

<input  type="reset" name="butReset" value="reset按钮"><!--重置 -->
<input  type="submit" name="butSubmit" value="submit按钮"><!--提交 -->
<input  type="button" name="butButton" value="button按钮"/>
<!--普通按钮 需要添加onclick事件-->
<input  type="image"  src="images/login.gif" />
<!--使用图片替代按钮-->

• 文本域

<form action="#" method="post" enctype="multipart/form-data">
<!--必须在form上添加enctype="multipart/form-data"-->
  <p><input type="file" name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>

• 文件域

<form action="" method="post" enctype="multipart/form-data">
  <p><input type="file" name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>
<!-- 使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。-->

• 邮箱、网址、手机号和搜索框

<p>邮箱:<input type="email"  name="email"/></p>
<!--会自动验证Email地址格式是否正确 -->
<p>请输入你的网址:<input type="url"  name="userUrl"/></p>
<!--会自动验证URL地址格式是否正确 -->
<p>手机号:<input type="tel"  name="iphone"/></p>
<!--在移动端只会显示数字输入-->
<p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>
<input type="submit"/>

• 数字和滑块

<p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10"/></p>
<p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>
<!--min 允许最小值 max允许最大值 step 合法的数字间隔-->

• 隐藏域
  type=“hidden”
• 只读文本框 （W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略）
  readonly=“readonly” 可以简写readonly
• 禁用
  disabled

<input name="name" type="text" value="张三"  readonly><!--只读-->
<input type="submit "  disabled   value="保存" ><!--禁用-->

• 表单元素的标注

<!--增强鼠标的可用性
    自动将焦点转移到与该标注相关的表单元素上-->
<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>

• placeholder
  placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。
  该提示会在用户输入值之前显示在输入字段中。
  注意：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。
• required
  required 属性是一个布尔属性。
  required 属性规定必需在提交表单之前填写输入字段。
  注意：required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。
• pattern
  用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
  注意：pattern 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。