HTML学习 - 表单

表单主要功能是登录、注册、搜索等界面都会用到表单，主要就是搜集用户信息。

表单中用到的一些控件

输入控件
1.文本框
2.密码框
3.文本域

选择控件
1.单选
2.复选
3.下拉

特殊控件
1.文件上传
2.隐藏域

按钮控件
1.提交按钮
2.普通按钮
3.重置按钮

form是表单标签，action表示你要把数据传送到哪（服务器，这边用#就表示把这个表单直接提交到我们当前这个网页，方便测试，）method是用什么方式传送get/post。get的话数据比较少，网页地址上也能看到数据。post可以提交大数据，网址上也看不到提交的数据。

input中的type用来表示是什么控件。name的话是要和服务器上定义一直，这样传到服务器上就知道你传的是什么数据。value就是你传的这个值是什么。

下面开始看代码-------------------------------------------------

输入控件

        <form action="#" method="get">
            用户名 <input type="text" name="username"> 

            密码 <input type="password" name="password"> 

            介绍 <textarea name="textarea" cols="50" rows="10"></textarea> 

            <input type="submit" value="提交">
        </form>

选择控件

单选

        <form action="#" method="get">
            性别：男<input type="radio" name="sex" value="1" checked>
            女<input type="radio" name="sex" value="1"> 

            <input type="submit" value="提交">
        </form>

复选

        <form action="#" method="get">
            爱好：打篮球<input type="checkbox" name="hobby" value="1" checked>
            看电影<input type="checkbox" name="hobby" value="2" >
            踢足球<input type="checkbox" name="hobby" value="3" > 

            <input type="submit" value="提交">
        </form>

下拉

        <form action="#" method="get">
            <select name="hobby" size="3" multiple>
                <option value="1">踢足球</option>
                <option value="2">打篮球</option>
                <option value="3">看电影</option>
            </select> 

            <input type="submit" value="提交">
        </form>

size表示展示几个选项，默认是1个。multiple表示可以同时选择多个按住ctrl。

特殊控件

文件上传

        <form action="#" method="post" enctype="multipart/form-data">
            上传图片<input type="file" name="file" >

            <input type="submit" value="提交">
        </form>

multipart/form-data是指表单数据有多部分构成，既有文本数据，又有文件等二进制数据的意思。

需要注意的是：默认情况下，enctype的值是application/x-www-form-urlencoded，不能用于文件上传，只有使用了multipart/form-data，才能完整的传递文件数据。

application/x-www-form-urlencoded不是不能上传文件，是只能上传文本格式的文件，multipart/form-data是将文件以二进制的形式上传，这样可以实现多种类型的文件上传。

隐藏域

上传一些服务器需要的数据，但是用户不用关心的数据。比如用户是通过点击还是输入搜索进入搜索页面的等 

        <form action="#" method="get" >
            搜索<input type="text" name="key" >
            

            <input type="hidden" name="act" value="click">
            <input type="submit" value="提交">
        </form>

hidden就是隐藏的，用户看不到，然后根据需要修改click/input（结合JS）

按钮控件

        <form action="#" method="get" >
            搜索<input type="text" name="key" >
            

            <input type="submit" value="提交">
            

            <input type="reset" value="重置">
            

            <input type="button" value="普通">
        </form>

提交 submit，提交功能，默认显示“提交”

重置reset，重置整个表单，会把你输入的内容清空，默认显示“重置”

button，普通的按钮，要结合别的代码使用

控件禁用

使用disabled可以禁用控件。

一般比如修改用户注册信息的时候，用户名不能再修改，就可以用这个。然后提交表单的时候，被disabled的内容也不会被提交。

Lable标签

当用户点击文字的时候，输入框也会获取焦点，提交用户体验。

点击“搜索”输入框也能获取焦点

        <form action="#" method="get" >
            <label for="search">搜索</label>
            <input id="search" type="text" name="key" >
            

            <input type="submit" value="提交">
        </form>