【HTML】表单-form

1、知识结构图

2、脚本示例

<form name="表单元素学习笔记" action="/" method="post" target="post" enctype="application/x-www-form-urlencoded">
<h1>1、input标签</h1>
1-文本框:<input type="text"  name="userName" size="30" maxlength="20" value="文本框" />
<br />
2-密码框：<input  type="password" name="pass" size="20" placeholder="请输入密码" />
<br />
3-单选按钮：
<input name="gen" type="radio" value="男"  checked />男
<input name="gen" type="radio" value="女" />女
<br />
4-复选框：
<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
<br />
5-按钮：
<input type="reset" name="butReset"  value="reset按钮">
<input type="submit" name="butSubmit" value="submit按钮">
<input type="button" name="butButton" value="button按钮"/>
<br />
6-图片按钮: 
<input type="image" src="E:/MyProject/Python/flasky/app/static/favicon.ico">
<br />
7-文件域：
<input type="file" name="files" />
<input type="submit" name="upload" value="上传" />
<br />
8-邮箱：<input type="email" name="email" placeholder="you@example.com"/>
<br />
9-网址:<input type="url" name="userUrl" placeholder="http://weburl"/>
<br />
10-数字：<input type="number" name="num" min="0" max="100" step="10"/>
<br />
11-滑块:<input type="range" name="range1" min="0" max="10" step="2"/>
<br />
12-搜索框:<input type="search" name="sousuo" placeholder="请输入搜索内容"/>
<br />
13-隐藏域：<input type="hidden" value="666" name="userid">
<br />
14-色块域：<input type="color" value="#ff0000" />
<br />
15-日期文本域：
<input type="date" name="date" />
<br />
16-年月文本域：<input type="month" name="month" />
<br />
17-年周文本域：<input type="week" name="week" />
<br />
<br />
<h1>2、select标签</h1>
<select name="列表名称" size="行数">
	<option value="选项的值" selected="selected" >…</option >
	<option value="选项的值">…</option >
</select>
<br />
<br />
<h1>3、textarea标签</h1>
<textarea name="showText"  cols="50" rows="4" >文本内容</textarea  >
<br />
<br />
<h1>4、label标签</h1>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
<br />
<br />
<h1>5、fielset 标签</h1>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
  
</form>

3、效果图

4、脚本与效果对映

5、表单初级验证

表单验证的好处

    1.减轻服务器的压力

    2.保证数据的可行性和安全性

表单初级验证的方法

   1.placeholder                   2.required                       3.pattern

placeholder

       1.input类型的文本框提供一种提示（hint）

       2.可以描述文本框期待用户输入何种内容

       3.提示语默认显示，当文本框中输入内容时提示语消失

       4.适合于input标签：text、search、url、email和password等类型

语法：

<input type="search" name="sousuo"  placeholder(文本框输入内容提示)="请输入要搜索的关键字"/>

required

       1.规定文本框填写内容不能为空，否则不允许用户提交表单

       2.适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

语法：

<input type="text" name="username"  required/(必填项)>

pattern

     用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

语法：

<input type="text" name="tel"  required pattern（验证规则，正则表达式）="^1[358]\d{9}" />