表单

表单创建
用form元素表示表单
用action属性表示表单的提交地址
用method属性表示表单的提交方式
在制作静态页面时，可以不用书写上述的属性
在制作静态页面时，建议不要设置form元素的样式
表单中可放置的元素
对于静态页面的开发者，表单只是一个普通的块盒，内部可以放置任何元素
通常情况下，表单中会放置一些可以与用户进行交互的元素
　　1、文本框
　　2、按钮
　　3、单选框
　　4、多选框
　　5、下拉列表
由于这些交互元素通常出现在表单中，因此，我们称之为表单元素。
表单中的两个重要属性：
　　1、name属性：表示发送到服务器的键名
　　2、value属性：表示发送到服务器的值
表单元素
1、文本框：
　　使用input元素表示一个文本框，input时一个空元素。
　　可以通过type属性设置文本框的类型，
　　常用的文本框：
示例：

<form action="" method="GET">
<div><input type="text">普通文本框</div>
<div><input type="password" name="" id="" placeholder="请输入密码"> 密码框 type="password"</div><!-- password 密码输入框 -->
<div><input type="text" name="" id="" value="默认的内容">带默认的内容的文本框 type="text" name="" id="" value="默认的内容"</div>
<div><input type="text" name="" id="" placeholder="请输入用户名">placeholder属性可指定，当文本框无内容时，显示的提示文本 type="text" name="" id="" placeholder="请输入用户名"</div>
<div><input type="text" name="" id="" minlength="2" maxlength="6"> 指定了最大输入字符的文本框 type="text" name="" id="" minlength="2" maxlength="6"</div>
<div><input type="file" name="" id="" >文件选择框 type="file"</div>
</form>

<form action="" method="GET">
<div><input type="email" name="" id=""> 用于输入email的文本框，当表单提交时，会触发格式验证，type=“email”</div>
<div><input type="url" name="" id=""> 用于输入url地址的文本框，会触发格式验证，type="url" </div>
<div><input type="hidden" name="" id="">隐藏框，type="hidden"</div>
<div><input type="number" name="" id="" step="2" min="0" max="30">用于输入数字的文本框,type="number"step="2" min="0" max="30"</div>
<div><input type="range" name="" id="" step="2" min="0" max="30">数字滑动选择框，type="range" step="2" min="0" max="30"</div>
<div><input type="date" name="" id="">用于输入日期的文本框，type="date"</div>
<div><input type="tel" name="" id="" pattern="1d{10}"> 用于输入电话的文本框，会触发格式验证，type="tel" pattern="1d{10}"</div>
<div><input type="date" name="" id="" value="2019-06-11">带默认的日期文本框</div>
<div><input type="time" name="" id="">用于输入时间的文本框 type="time"</div>
<div><input type="time" name="" id="" value="10:26">带默认的时间的文本框 ，type="time"， value="10:26"</div>
<div><input type="datetime-local" name="" id="">用于输入日期和时间的文本框，type="datetime-local"</div>
<div><input type="datetime-local" name="" id="" value="2019-06-11T10:33">带默认日期和时间的文本框，type="datetime-local" value="2019-06-11T10:33"</div>
<div><input type="month" name="" id="" > 用于输入月份的文本框，type="month"</div>
<div><input type="month" name="" id="" value="2019-6"> 带默认月份的文本框，type="month" value="2019-6"</div>
<div><input type="week" name="" id="">用于输入第几周的文本框，type="week"</div>
<div><input type="week" name="" id="" value="2017-W10">带默认第几周的文本框，type="week" ，value="2017-W10"</div>
<div><input type="color" name="" id="">颜色选择框，type="color"</div>
<div><input type="submit" value="提交"> 提交框，type="submit" </div>
</form>

2、按钮：
　　input和button都可以用来表示按钮框
区别：
　　input是空元素，button时普通元素
　　input是旧版本中的元素，button是HTML5中的元素
　　input按钮只能写文本，button的内容更丰富
　　input的兼容性更好，button稍差
　　　　1、重置按钮：
示例：
　　　　　　　　

<!-- 重置按钮 -->
<form action="">
<div><input type="text" name="" id="" placeholder="请输入账号"></div>
<div> <input type="password" name="" id="" placeholder="请输入密码"></div>
<div>
<label><input type="radio" name="" id="" checked> 男</label>
<label> <input type="radio" name="" id=""> 女</label>
</div>
<div> <input type="reset" value="重置按钮"><button type="reset"> 重置按钮</button>
</div>
</form>

　　　　2、提交按钮：
示例：

<!-- 提交按钮 -->

<form action="https://www.baidu.com/" method="POST">
<div><input type="text" name="" id="" placeholder="请输入账号"></div>
<div><input type="password" name="" id="" placeholder="请输入密码"></div>
<div>
<label><input type="radio" name="" id="" checked> 男 </label>
<label><input type="radio" name="" id=""> 女</label>
</div>
<div>
<input type="submit" value="提交按钮">
<button type="submit"> 提交按钮</button>
</div>
</form>

　　　　3、图标按钮
示例：

<!-- 图标按钮 -->
<form action="">
<div><input type="text" name="" id="" placeholder="请输入账号"> </div>
<div><input type="password" name="" id="" placeholder="请输入密码"></div>
<div>
<label><input type="radio" name="" id="" checked> 男</label>
<label> <input type="radio" name="" id=""> 女</label>
</div>
<div>
<input type="image" src="../../image/star.png" style=" 50px;height: 20px;">
<button type="submit"> <img src="../../image/star.png" style="  50px;height: 20px;" alt=""></button>
<input type="submit" >
</div>
</form>

3、单选框：
　　用radio表示单选框
　　checked表示默认选中的
　　　　在单选框中name属性相同时，只能选择一个
　　　　可以使用label元素设置表单元素的含义，然后将其与其他表单元素进行关联，关联的好处在于：
　　　　　　1、用户通过点击label，就可以聚焦到被关联的表单元素，
　　　　　　2、搜索引擎和浏览器可以通过该关联，读取出该元素关联到的label文本上
关联方式有两种：
　　1、显式关联，设置label元素的for属性，为关联表单元素的id
　　2、隐式关联，将表单元素作为label的子元素
示例：

<div><input type="radio" name="" id="">单选框</div>
<div><input type="radio" checked>默认选中的单选.</div>
<div>
具有相同name属性时，只能选择一个
<input type="radio" value="1" name="gender">男
<input type="radio" value="0" checked name="gender">女
</div>
<div>
<input type="radio" name="sex" id="maie"> <label for="maie">男</label>
<label><input type="radio" name="sex">女</label>
</div>

4、多选框：
示例：

<div><input type="checkbox" name="" value="" id="">多选框 type="checkbox </div>
<div>
<label>
<input type="checkbox" name="" id="">
<span>开心</span>
</label>
<label>
<input type="checkbox" name="" id="">
<span>难过</span>
</label>
<label>
<input type="checkbox" name="" id="">
<span>大笑</span>
</label>
</div>

5、下拉列表：
　　使用select和option元素的组合表示下拉列表
　　下拉列表分为：普通的下拉列表和选项分组的下拉列表
示例：

<form action="">
　　<label for="web">选择职位：</label>
　　　　<select name="" id="web">
　　　　　　<optgroup label="开发部">
　　　　　　　　<option value="2345">主管</option>
　　　　　　　　<option >程序员</option>
　　　　　　　　<option >产品经理</option>
　　　　　　　　<option >项目经理</option>
　　　　　　</optgroup>
　　　　　　<optgroup label="销售部">
　　　　　　　　<option>主管</option>
　　　　　　　　<option>销售经理</option>
　　　　　　　　<option>销售员</option>
　　　　　　</optgroup>
　　　　</select>
</form>

示例：

<form action="">
<label>需要使用的浏览器：
<input list="brow" type="text">
</label>
<datalist id="brow">
<option value="chrome">谷歌浏览器</option>
<option value="Firefox">火狐浏览器</option>
<option value="Internet Explorer">IE浏览器</option>
<option value="Opera">欧朋浏览器</option>
<option value="safarl">苹果safarl浏览器</option>
</datalist>
</form>

6、多行文本框：
　　datalist元素表示数据列表
　　textatea属性表示多行文本框
示例：

<form action="">
<div>
<label for="textpersonal">请填写你的个性签名：</label>
<br>
<textarea name="" id="" cols="30" rows="10">这里的内容会在页面显示，包括空格</textarea>
</div>
</form>

7、表单的分组和状态
　　使用fieldset和legend元素，对表单内容进行分组
　　使用disabled属性和readonly属性，设置表单元素的可用状态
　　　　disabled：禁止修改，
　　　　readonly： 仅限阅读