HTML表单

常见的表单例如：（所包含一系列的登录注册、邮箱、验证等等）

语法：

<form  method="post" action="result.html">
<!--method规定如何发送表单数据.常用值：get  | post、action表示向何处发送表单数据-->
</form>

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

<input  type="text"  name="fname" value="text"/>
<!--type元素类型、name元素名称、value元素的值-->

• 文本框

<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />

type="text"：文本框
name="userName"：文本框名称
value="用户名"：文本框初始值
size="30"：文本框长度
maxlength="20"：文本框可输入最多字符

• 密码框

<input  type="password "  name="pass"  size="20" />

• 单选框

<input name="gen" type="radio" value="男"  checked  />男
<!--checked默认选中-->
<input name="gen" type="radio" value="女" />女

• 复选框

兴趣爱好:<br/>
    <input type="checkbox" name="interest" value="lookbook" />运动
    <input type="checkbox" name="interest" value="playgame" checked/>聊天
    <input type="checkbox" name="interest" value="lookbook" />玩游戏

• 列表框
  selected：默认选中
  option：选项

  
  

<label>日期:</label><br/>
<select name="data">
    <option value="2019/11/6" selected>2019-11-6</option>
    <option value="2019/10/1" >2019-10-1</option>
</select>

• 按钮
  submit：提交
  reset：重置
  imge：图片
  

  button：普通按钮

<input type="submit" value="确定"/>
<input type="reset" value="重置" disabled/><!--disabled不可用-->
<input type="image" src="renren.gif"/>

• 多行文本域

<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  >
<!--cols显示列数、rows显示行数-->

<textarea name="content" cols="40" rows="20">文本内容</textarea>

• 文件域

<input type="file" name="myfile"/>

• 邮箱

<label for="mail">邮箱地址:</label> <input id="mail" type="email" name="myemail"/>

*会自动验证Email地址格式是否正确

• 网址
  required：提示必填

  
  

<label>请输入你的网址:</label><input type="url"  name="userUrl" placeholder="请输入url,注意格式" required/>
<!--placeholder提示文字-->

*会自动验证URL地址格式是否正确

• 滑块
  min：允许的最小值
  max：允许的最大值
  step：合法的数字间隔

  
  

<input type="range"  name="range1" min="0" max="10" step="2" /></p>

• 搜索框

<input type="search"  name="sousuo"/>

表单初级验证的方法
[1] placeholder 文本提示
[2] required 必填项
[3] pattern 验证规则，正则表达式