HTML表单form

如果你应经有了基础的HTML和CSS知识，再来学习的form就没有必要一点一点跟着教程学习，用的时候看下手册，学习form元素要知道什么时候用它，如果仅仅设计网页视觉效果，没有必要引入表单form，之所以引入form，就是为了客户端和服务端通信，比如最简单的网页注册窗口、登录窗口，普通的标签不具有http的通信功能。如果工作时侧重页面效果，那么你就不用关心通信问题，你的重点是设计登录界面，然后切图实现设计效果。如果你要架构整个网站，肯定要去了解通信的知识，如果你是计算机专业科班出身，计算机网络通信毫无疑问是非常熟悉的。如果是其他行业转行，又不想仅仅学习页面的效果设计，时间有限，自然不可能再重新学习计算机通信等基础的课本知识，可以边工作边学习，从外往里学习。比如你学习src和href关于URL可以浅尝辄止，可以深入思考其背后的http通信知识，不同的人学习URL根据用途要求的深度不同。

表单也算是前端的一个重要知识模块，本节课依然和前面第一次学习html知识一样，先创建一个完整但非常简洁的小案例，来给大家展示表单form的全貌，了解了框架，就可以边查手册，边学习，边开发。一般培训班的课程往往都是一个标签一个标签去讲解，这样对于喜欢整体思考，学习能力强的人自然是浪费时间。

登录功能窗口制作

源码下载

窗口HTML结构

    <!--创建一个用于用户登录的form表单-->
<form action="https://github.com/join" method="post" name="submit">
    <!--用户名输入文本框-->
    <span>账号:</span><input type="text" name="account">
    <br>
    <!--登录密码输入文本框-->
    <span>密码:</span><input type="text" name="password">
    <br>
    <!--发送文本框数据的功能按钮-->
    <input type="submit" value="登录">
</form>

代码解析

最外层父元素form是块元素，form表单的属性action、method、name都是关于http通信功能的属性，不影响表单form块元素的布局和外观，设计网站登录窗口视觉效果的时候，可以不写，当然你不写，团队其他人就要补写，完整上线部署的网站肯定是要写的。form里面的子元素分为两部分，一部分元素仅仅是为了视觉效果，另一部分是为了填写要提交的数据，比如登录时输入账号和密码的文本框，

input元素是行内块元素，可以自定义文本框的尺寸，属性type的功能是定义该元素的功能和文本框中数据的用途。type的属性值是"text",得到一个文本框，可以输入字符，填写的内容会被发送到服务器。 type的属性值是"submit",从视觉上浏览器默认会产生一个按钮效果，功能上是当你使用鼠标单击该按钮的时候，浏览器会调用自己相关程序模块，把表单中文本框里面的数据发送到到服务器，这里可以看出表单标签的作用是把input文本框和input提交按钮包裹在开始标签和结束标签之间，每一个提交按钮对应一个form表单，各自提交各自对应表单form范围内的数据。type用来表示元素功能，同时浏览器会根据type的值默认一个样式，再设计网页效果的时候，要根据input元素用途正确添加属性值。

与通信相关的元素都会使用一个name元素标识，比如上面两个文本框不使用"account"、"password"标记，服务器收到数据后也不知道是什么数据，哪个是密码，哪个是用户名。账号文本框的属性name赋值"account"标记后，发送数据的时候就会发送“account+用户名”，服务器就知道你发送的数据是什么数据。在设计登录窗口视觉效果的时候有没有name属性无所谓，它不影响样式，正式测试或部署网站的时候要填写。

窗口CSS样式

前面都讲过相关命令，CSS样式布局不再解释，代码中做了简单注释，照着模仿一遍即可。

<style>
        form{
            width: 400px;/*登陆界面尺寸*/
            height: 300px;
            text-align: center;/*元素、文字居中*/
            border-radius: 10px;/*倒圆角*/
            border: 1px solid #777777;/*外边框*/
            background-color: white;

            /*自适应上下左右居中*/
            position: absolute;
            left: 50%;/*元素左边界距离窗口左边界是窗口宽度一半*/
            top: 50%;
            margin-top: -150px;/*通过margin调整外边距，距离是高度一半*/
            margin-left: -200px;/*200是width的一半*/
        }
        input{
            height: 35px;
            width: 250px;
            border-radius: 5px;
            font-size: 20px;
        }
        span{
            font-size: 20px;
        }
        .account{
            margin-top: 50px;
        }
        .password{
            margin-top: 20px;
        }
        .submit{
            margin-top: 50px;
            background-color: #1abc9c;
            border-width: 0px               /*登录提交按钮外边框宽度设置为0不显示*/
        }
</style>

总结

HTML元素是通信功能和CSS样式共同的载体，一些属性是为了通信服务，一些属性是为了视觉效果服务。这里也可以学到一点，通过html的元素可以为浏览器引入各种功能，比如让一个标签支持调用本地的摄像头、麦克风、显卡等硬件，比如canvas标签能够实现WebGL。这些功能的实现都依赖与浏览器程序的实现，这就是浏览器的开发问题了，有兴趣的话可以了解浏览器的知识和开发，及时不开发浏览器，学习浏览器的基本设计原理和功能，也有助于HTML和CSS的学习，毕竟浏览器是 HTML和CSS标记语言的解释器，没有浏览的解析，这些标签和样式也不会再网页上呈现出来，也无法实现客户端与服务器的通信。

表单元素form属性

属性	值	含义
name	自定义命名	表单的名称，可以理解为通信约定，表单数据提交服务器标记数据的方式，没有name属性值，服务器也不知道接收的数据是什么数据
method	get/post	method表示HTTP请求报文方法，get是请求URL指向的数据，post是提交数据，比如注册窗口表单
action	URL	数据发送的地址
accept-charset	字符编码标准	告诉服务器使用哪种字符集标准处理接收到的数据，比如accept-charset="UTF-8"
target	_blank/_self/_parent	与超链接的target属性类似，规定的是服务器返回的html数据如何打开

表单子元素

表单的子元素select、lable和input一样要写在form里面才可以提交服务器，name属性是form元素和它的子元素都具有的属性，主要用于通信数据标识。

input

input的属性比较多，下面列举一部分，设计网页的时候也不一定能用全部用到，简单熟悉即可，用到的时候可以随时查询。

属性	属性值	含义
name	自定义	提交服务器数据的数据名
type	checkbox/password//submit/text...	定义input元素类型，控制用途，比如submit可以使一个input元素具有提交数据的功能，checkbox可创建一个复选框
value	自定义字符	文本框或按钮中显示的值
src	图片地址URL	链接一张图片

type的属性值

属性值	含义
checkbox	复选框，单击可以选中或取消
text	文本框，可以输入字符
submit	提交按钮，单击该按钮表单中数据会发送给服务器。
radio	单选按钮
image	引入图像作为提交按钮

菜单select

比如你在网站上选择赞助金额，然后提交服务器，可以使用表单form的子元素select和selectoption的子元素如下的菜单形式，案例代码如下。

<form action="">
    <!--创建多选菜单-->
    <select name="cookieDate">
        <!--选项一，selected表示默认选项-->
        <option value="10" selected="selected">赞助10￥</option>
        <option value="100">赞助100￥</option><!--选项二-->
        <option value="200">赞助200￥</option><!--选项三-->
        <option value="300">赞助300￥</option><!--选项四-->
    </select>
</form>

select是行内块元素，option标签用来创建选择菜单select元素的选项，selected是option元素的属性，赋值"selected"表示默认选中状态，也可以切换其他选项，被选中的选项中的数据执行提交命令后会被提交到服务器。

label

label元素用来关联input元素，比如下面的案例，登录窗口往往设置一个选项，控制浏览器是否记住登录密码，当你单击“登录密码”文本区域的时候就可以控制复选框input是否选中，提高鼠标可单击交互的面积。

<form action="">
    <!--input通过type="checkbox"定义一个复选框-->
    <input type="checkbox" checked="checked" id="save_login">
    <!--单击lable元素会触发for关联的上面复选框-->
    <label for="save_login">记住密码</label>
</form>

label元素的for属性是为了选择你关联的input元素，for的属性值就是你要关联的input元素的id属性值。