2216次阅读
表格表单

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

<!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中显示,但是也提交到后台了。

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

如果您觉得此教程不错,想支持一下,您可以通过支付宝扫码给我们一点,不要超过100元哦!
评论请先登录