第三篇 HTML 表单及表格

表单及表格

表单，常用在登录、注册等地方，这也是一个最基本的。

 

我们就用登录，来学习什么是表单！

 

表单 form 标签，在某些好用的编辑工具，比如：WebStorm  你在上面写出form再按下 键盘左侧的‘Tab’键，会直接弹出form的开始和结束标签，其他元素 div table span 等都是一样的，还会弹出此元素必要的 属性， 比如img 按下 ‘Tab’ 就会弹出 这样的 <img src="' alt="" /> 它会直接帮你写好。

 

来吧，继续说form表单，因为是介绍给入门同学的，所以就先不涉及后台验证和JS验证，还有数据库连接等操作了。就先实现最基本的静态 表单样式，各位同学，写代码也不要光想着随便写出来，还要想着可扩展性。先不考虑复杂的，用最基本的 form验证，得按照form表单的规则，用input来写文本框，最后 用submit来提交，别随便用其他标签写，就把前端的形式给展现出来，那么后期你扩展，和后台交互，就麻烦了，还要去写JS事件转换，ajax等异步处理。所以我们在编写一个程序的时候，先考虑怎么写，把自己会的都往上面加，然后想到一个最简单的方式。。。

 

我们先写一个最基础的，给同学们演示一下，不过先不加任何的css样式：

 

<form action="#" method="post">
    <p>
        用户名： <input type="text" />
    </p>
    <p>
        密码： <input type="password" />
    </p>
    <p>
        <input type="submit" value="登录" />
    </p>
</form>

 

以上代码，就是最简单的登录，那么我们来解释一下这里的代码，是什么意思：

 

里面我们用到了 p标签，因为它是段位，会跨行，上下会有一点间距，所以用来把 用户名、密码、登录按钮 给分割开。在用户名后面 我们用到了 input标签，它是专门写文本框的，标准情况下，它是在form表单里的，写在外面的话会包语法错误，而input 有一个 type的属性，这也是关键，它的值很多， text 是代表文本框，可以输入 可见的 内容，而password 是密码，输入的话，用户就看不见，只会呈现出密码的样式， submit是表单提交按钮的意思，value则是它的值，如果没有设置 value的话，submit是默认“提交”两个字。  细心的同学不光是注意form表单内部，还会注意它本身，看到 action="#" 和 method="post" 了吗？ action是url(地址)指向，就是我们表单提交后，它会走向哪里， method是它的提交方式，gat和post， post的安全性比gat高，它们的区别，大家去网上找找，这里我就不多说了。

 

table表格，它常用在后台管理，比如用户管理等

我们先写一段代码给同学们看看：

 

<table>
    <tr>
        <th>编号</th><th>用户名</th><th>QQ</th>
    </tr>
    <tr>
        <td>1</td>
        <td>龙枫</td>
        <td>563292416</td>
    </tr>
    <tr>
        <td>2</td>
        <td>同学</td>
        <td></td>
    </tr>
</table>

 

不懂的同学，就写一段相同的代码测试。我们就来解释下，table表格里的标签是什么意思：

tr也是活在table下面的，它如同块级元素，是可跨行的，它是控制 td、th的，内容都是 td和th提供的，他们则是行级元素。th的字体比td深，就是加粗过的，一般就用与表格里的分类一样，td则是纯内容。他们会对齐的哦，一个tr下的td会对应下面一个tr里的td，他们是一列对应的。table也有属性，但也属于css样式，我们就先不管，在这里就先做出一个最基本的表格。