HTML学习笔记day2

表单

form

form表单的属性：
1.Name:表单的识别名称。通过表单的名称来辨认页面提交的是哪个表单的数据。
2. Action:处理表单程序的地址。action=”index.html”
3.Method:将表单中的数据提交到服务器的方法。Method是常用的两个取值get和post
get方法
默认的一种传递数据的方法(查询用get)
特点：
1.通过地址来传递表单中的数据
2.不能传递敏感的数据,如:密码
3.不能传递大量的数据,每次只能传递1024字节
4.不能上传附件。
post方法
不是通过地址传递数据,数据传给文件处理程序。（增删改用post）
特点:
1.相对安全
2.可以传递海量的数据
3.能上传附件
何时使用get和post?
1.如果表单提交是被动的(比如搜索引擎查询),并没有敏感信息。
当你使用get时,表单数据在页面地址栏中是可见的。比如：search.html?name=john&age=25
注：get最适合少量数据的提交，浏览器会设定容量限制。
2.如果表单正在更新数据，或者包含敏感信息。如：密码
则使用Post的安全性更好，因为在页面地址栏中被提交的数据时不可见的。

    <form action="3 HTML-login.html" method="post">

        用户名：<input type="text" id="userName" name="userName"/><br />
        密码：<input type="password" id="pwd" name="pwd"/><br />
        <input type="submit" name="submit" id="submit"/>
    </form>

input

表单元素：指不同类型的input元素。表单最重要的作用是获取用户信息。需要在表单中加入表单项。
语法：
常用的元素类型type:
1. text：单行文本框 (用户名)
2. textarea：多行文本框
3.password：密码文本框
4. submit：提交按钮
5. image：图片按钮
6. reset：重置按钮，重设表单内容。
7.button：普通按钮
8.hidden：隐藏元素
9.radio：单元按钮
10.checkbox：复选框
11. file：文件域
12. select：列表框
使用上传必须改一下表单的enctype=”multipart/form-data”

<!-----单行文本----->       
        <input type="text" name="userName" id="userName" size="30" maxlength="10"/>

<!----密码框----->
        <span>密码：</span>
        <input type="password" name="pwd" id="pwd" size="30" maxlength="10" />

<!-----图片类型---->
        <input type="image" src="../image/logo.jpg" name="img" id="img"  />

<!-------单元按钮----->
        <span>性别：</span>
        <!------checked="checked"：单选框默认选中按钮--->
        <input type="radio" name="sex" id="sex" checked="checked" />男
        <input type="radio" name="sex" id="sex"  />女

<!---多选框---->
        <span>爱好：</span>
        <input type="checkbox" name="hobbby" value="1"/>看书
        <input type="checkbox" name="hobbby" value="2" />电影
        <input type="checkbox" name="hobbby" value="3" />运动
        <input type="checkbox" name="hobbby" value="4" />游戏

<!------上传---->
        <span>上传：</span>
        <input type="file" name="file" id="file"  />

<!----下拉框（列表框)---->
        <span>颜色：</span>
        <select name="color" id="color">

            <option value="red">红色</option>
            <option value="green">绿色</option>
            <option value="yellow">黄色</option>
            <option value="blue">蓝色</option>
            <option value="pirple">紫色</option>
            <!--默认选择-->
            <option value="select" selected="select">-请选择-</option>

        </select>

<!--多行文本域--->
            <span>备注：</span>
            <textarea name="remark" cols="25" rows="7" maxlength="140"></textarea>

<!---提交--->
<input type="submit" name="" id="" value="提交" />

<!-----重置--->
<input type="reset" name="" id="" value="重置" />

<!-----普通按钮查询----->
<input type="button" value="查询" />

login

form表单中enctype属性可以用来控制对表单数据的发送前的如何进行编码
form表单中enctype属性的三种类型:
1.application/x-www-form-urlencoded 默认类型
发送前会编码所有字符，即在发送到服务器之前，所有字符都会进行编码
2.multipart/form-data不对字符编码，用于发送二进制的文件，其他两种类型不能用于发送文件
3.text/plain用于发送纯文本内容，空格转换为 “+” 加号，不对特殊字符进行编码，
一般用于email之类的

<form action="#" method="post">
        <fieldset>
            <!--filedest:对表单元素进行分组，一个表单里可以有多个-->
            <!--legend标签：对每组的内容进行说明--->
            <legend>用户登录</legend>
            <span>账号：</span>
            <input type="text" name="userName" id="userName" size="30" maxlength="10" placeholder="请输入用户名" 
                required="required" pattern="[A-Za-z]{3}"/>
            <!-- placeholder:占位文本，在输入框里给用户一个醒目的提示-->
            <!--autofocus:自动聚焦
                required:非空
                pattern:正则表达式
            -->
            <br /> <br />
            <span>密码：</span>
            <input type="password" id="pwd" name="pwd" size="30" maxlength="14" placeholder="请输入密码"/>
            <!--隐藏域-->
            <input type="hidden" name="userid" />
            <br /> <br />
            <!--disabled="disabled":设置按钮不可用-->
            <input type="submit" disabled="disabled" value="登陆" />
            <input type="reset" value="重置" />
        </fieldset>
        </form>

HTML5新特性

新的语义元素，比如 header>, footer>, article>, section>。
 新的表单控件，比如数字、日期、时间、日历和滑块。
 强大的图像支持（借由 canvas> 和 svg>）
 强大的多媒体支持（借由 video> 和 audio>）
 强大的新 API，比如用本地存储取代 cookie。
article：定义页面独立的内容区域。
aside：定义页面的侧边栏内容。
header>：定义了文档的头部区域
footer>：定义 section 或 document 的页脚。
nav>：定义导航链接的部分

表单

<form action="#">
            <span>颜色：</span>
            <input type="color" name="color" id="color" value="" />
            <br />
            <!--日历-->
            <input type="date" name="date" id="date" value="" />
            <input type="datetime" name="datetime" /><br />
            <input list="browsers" name="browsers" />
            <datalist id="browsers">
                <option value="ie">ie浏览器</option>
                    <option value="火狐">火狐浏览器</option>
                        <option value="谷歌">谷歌浏览器</option>
                            <option value="苹果">苹果浏览器</option>
                            <option value="欧朋">欧朋浏览器</option>
            </datalist>
        </form>

Web存储

cookie来做存储，最多只能存4kb数据
HTML5提供了两种在客户端存储数据的新方法:
localStorage：没有时间限制的数据存储
sesssionStorage：针对一个session的数据存储,存储在当前页面的内存中，不是存在浏览器内容中, 存储容量在5m左右。sessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后(当前页面),数据会被删除。
setItem(key,value)：存储数据，以键值对的方式存储
getItem(key)：获取数据，通过指定名称的key获取对应的value值
removeItem(key)：删除数据，通过指定名称key删除对应的值
clear()：清空所有存储的内容