html-基础知识二
form 功能：向服务器传输数据，实现用户和web 服务器的交互
一、表单属性
accept-charset： 规定在提交表单中使用的字符集 action：规定向何处提交表单地址（url） autocomplete 规定浏览器自动完成表单，默认on enctype 规定被提交数据的编码 multipart/form-data （多部分/格式数据） method 规定表单提交数据用到的http方法 默认get获取 还有post 提交 name 规定识别表单名称（对于 DOM 使用：document forms name） novalidate 规定浏览器不验证表单 target 规定 action 属性中地址的目标（默认：_self）
二、 form 表头书写格式应用
<form action="" autocomplete="off" enctype="multipart/form-data" method="post" novalidate></form> 注：两个form 中间写你要执行的内容
三、表单元素
基本概念：HTML重要部分 通常用于脚本，动态页面，数据处理等联系，是制作动态网站的重要内容 表单工作原理：访问者浏览网页-->填写表单-->提交按钮提交-->信息通过internet传到服务器-->服务器上的程序处理数据-->正确返回输入完成，错误返回错误信息
input 元素会根据不同的 type 属性，变化为多种形态
type属性值 |
表现形式 |
对应代码 |
|---|---|---|
text |
单行输入文本 |
<input type=text" /> |
password |
密码输入框 |
<input type="password" /> |
date |
日期输入框 |
<input type="date" /> |
checkbox |
复选框 |
<input type="checkbox" checked="checked" /> |
radio |
单选框 |
<input type="radio" /> |
submit |
提交按钮 |
<input type="submit" value="提交" /> |
reset |
重置按钮 |
<input type="reset" value="重置" /> |
button |
普通按钮 |
<input type="button" value="普通按钮" /> |
hidden |
隐藏输入框 |
<input type="hidden" /> |
file |
文本选择框 |
<input type="file" /> |
label标签:和input 配合使用，没有label不报错，但是不规范
注：
- label 元素不会向用户呈现任何特殊效果。
- <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
一、input type属性应用举例
1.1用户名：text
<div>
<!--用户名-->
<label for="id">用户名：</label>
<input id='id' name='username' type="text" value="zzy" >
</div>
1.2密码 password
<div>
<!--密码-->
<label for="pwd">密码</label>
<!--placeholder 设置占位内容-->
<input name='password' id='pwd' type="password" placeholder="请输入密码">
</div>
1.3日期：date
<div>
<!--日期-->
<label for="bd">生日</label>
<input id='bd' name='birthday' type="date">
</div>
1.4 复选框：checkbox
<div>爱好：
<!--checkbox 复选框-->
<label for="ck1"></label>
<input id="ck1" name='hobbies' type="checkbox" value="football">足球
<label for="ck2"></label>
<input id="ck2" checked name='hobbies' type="checkbox" value="basketball">篮球
<label for="ck3"></label>
<input id='ck3' name='hobbies' type="checkbox" value="volleyball">排球
</div>
1.5单选框：radio
<div>性别:
<!--radio 单选框-->
<label for="gd1">男</label>
<input id='gd1' checked name='gender' type="radio" value="1">
<label for="gd2">女</label>
<input id='gd2' name='gender' type="radio" value="0">
</div>
<div>
1.6提交按钮：submit
<div>
<!--submit提交-->
<label for="sb"></label>
<input id='sb' type="submit" value="提交数据">
</div>
1.7重置按钮：reset
<div>
<!--reset重置-->
<label for="rs"></label>
<input id='rs' type="reset" value="重置">
</div>
<div>
1.8普通按钮:button
<div>
<!--button普通按钮-->
<label for="bt">普通按钮</label>
<input id='bt' type="button">
</div>
1.9隐藏输入框:hidden
<div>
<!--hidden隐藏输入框-->
<label for="lb">隐藏输入框</label>
<input id='lb' type="hidden" value="隐藏">
</div>
1.10 文本选择框:file
<div>
<!--file 文本选择框-->
<label for="fl">上传头像</label>
<input id='fl' type="file" value="jpg">
</div>
注：
属性说明:
- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
- checked：radio和checkbox默认被选中的项
- readonly：text和password设置只读
- disabled：所有input均适用
select标签： 下拉菜单
<div>
<!--select标签： 下拉菜单-->
<label for="ct">籍贯</label>
<select name="sheng" id="ct">
<option value="bj">北京</option>
<option selected value="hn">河南</option>
<option value="sh">上海</option>
</select>
<label for="shi">市区</label>
<select name="shi" id="shi">
<!--optgroup 分组的下拉框 继承北京的下一级菜单-->
<optgroup label="北京">
<!--option 具体的下拉选项-->
<option value="cp">昌平</option>
<option value="hd">海淀</option>
<option value="tz">通州</option>
</optgroup>
<optgroup label="上海">
<option value="pd">浦东</option>
<option value="mh">闵行</option>
<option value="hp">黄埔</option>
</optgroup>
<optgroup label="河南">
<option value="xy">信阳</option>
<option value="zk">周口</option>
<option value="xx">新乡</option>
</optgroup>
</select>
</div>
属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
textarea 多行文本
<div>
<!--textarea 多行文本-->
<label for="tt">个人简介</label>
<textarea name="myinfo" id="tt" cols="30" rows="10">
</textarea>
</div>
注：
- name：名称
- rows：行数
- cols：列数
- disabled：禁用
