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不报错，但是不规范

注：

1. label 元素不会向用户呈现任何特殊效果。
2. <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：禁用