表单创建
用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： 仅限阅读