玩命牛的成长记录（五）——表格表单

来源：互联网发布：linux 重启服务器命令编辑：程序博客网时间：2024/06/01 09:31

欣欣（1989—）

自动化专业研究生，转行当程序员，在一家国内领先的IT公司工作，业余时间兼职创业，创办网站欣欣网站制作。

玩命牛（1989—）

欣欣的本科同学，学习非常玩命，本科毕业后去了一家小公司，干得并不称心，正准备转行IT，听说本科同学欣欣正在兼职互联网创业，特邀他一起合租，同时加入了兼职创业的队伍。

表格表单

看一下上一节笔记中的一点问题，用两个类解决，一个类表示公共样式，另一个类表示特有样式，代码量一下子减少很多，看例子：

<!DOCTYPE html><head><meta charset=utf-8 /><title>表格表单</title><style>ul {width : 480px;height : 300px;margin : 0px auto;padding : 0px;}.li {width : 98px;height : 298px;float : left;list-style-type : none;margin : 0px 10px;}.greenLi {border : 1px solid green;}.greenLi:hover {background-color : green;}.yellowLi {border : 1px solid yellow;}.yellowLi:hover {background-color : yellow;}.grayLi {border : 1px solid gray;}.grayLi:hover {background-color : gray;}.pinkLi {border : 1px solid pink;}.pinkLi:hover {background-color : pink;}</style></head><body><ul><li class="li greenLi"></li><li class="li yellowLi"></li><li class="li grayLi"></li><li class="li pinkLi"></li></ul></body>

check the result

好了，接下来看一下table的一些用法：table还是有很多细节的，先来看个简单例子

<!DOCTYPE html><head><meta charset=utf-8 /><title>表格表单</title></head><body><table border="1px" cellspacing="0px" cellpadding="10px" align="center"><tr align="right"><th width="100px" height="50px">姓名</th><th width="100px">年龄</th><th width="100px">性别</th></tr><tr align="center"><td height="50px">欣欣</td><td>25</td><td>男</td></tr><tr><td height="50px">玩命牛</td><td>25</td><td>男</td></tr></table></body>

check the result

在这个例子中，首先要知道，tr代表table中的一行，th和td都是代表一个单元格，不同的是，th被用来代表表头，td则是普通单元格。然后table中可以设置border，cellspacing，cellpadding和align，这几个比较常用，cellspacing是代表表格线与线之间的间距，而cellpadding是代表文字与表格线之间的间距，试一试便知。tr、th、td都可以设置width和height，而且width的影响范围是一列，height的影响范围是一行，也可以设置align，在tr中设置align是作用在一行，在th或td中设置align则是作用在一个单元格。

下面来看个和表单结合的例子：

<!DOCTYPE html><head><meta charset=utf-8 /><title>表格表单</title></head><body><h1>表单</h1><table><form action="#" method="get"><tr><td>姓名：</td><td><input type="text" name="username" placeholder="请输入姓名"/></td></tr><tr><td>性别：</td><td><input type="radio" name="gender" value="0" checked/>男<input type="radio" name="gender" value="1"/>女</td></tr><tr><td>密码：</td><td><input type="password" name="passwd" placeholder="请输入密码"/></td></tr><tr><td>爱好：</td><td><input type="checkbox" name="hobby" value="lanqiu"/>篮球<input type="checkbox" name="hobby" value="zuqiu"/>足球<input type="checkbox" name="hobby" value="yumaoqiu"/>羽毛球</td></tr><tr><td>住址：</td><td><select><option name="beijing">北京</option><option name="tianjin">天津</option><option name="shanghai">上海</option></select></td></tr><tr><td>备注：</td><td><textarea name="beizhu"></textarea></td></tr><tr><td>简历：</td><td><input type="file" name="resume"/></td></tr><tr><td>操作：</td><td><input type="submit"/><input type="reset"/></td></tr></form></table></body>

check the result

这里面基本包括了常用的表单元素，这个例子有一些知识点要记录一下：1、input可以用placeholder来指定提示信息；2、几乎每一个input都有一个name属性，这个属性就是与后台交互的媒介哦，怎么说呢？请点击提交按钮，再看看浏览器地址栏的url，是不是有变化呢？是的，表单提交了；3、表单提交到哪里去了呢？这取决于form中的action属性，这里制定的是#，表单提交给本页面；4、表单还有一个重要属性method，一般取值get或者post，这是两种提交方式，如果是get，那么提交的数据就会在url中显示，就如我们看到的，如果是post，数据不会在url中显示，但是也提交到后台了。

关于表单的知识，要结合后台才能够理解透彻，不过这里也算是提到很多了。

0 0