zoukankan      html  css  js  c++  java
  • 前端笔记4-表格,表单

    1.表格

    table是一个块元素

    1.创建一个表格时,如果没有指定tbody,则浏览器会在页面中自动添加tbody,并且将所有的tr都放到tbody中
    一定要注意,默认情况下tr是tbody的子元素,而不是table的子元素。

    2.rowspan表示纵向合并单元格,colspan表示横向的合并单元格

    <style type="text/css">
    table {
    500px;
    margin: 0 auto;
    /*
    border-collapse可以用来设置表格的边框合并当设置border-collapse以后border-spacing自动失效
    * */
    border-collapse: collapse;
    }

    td,th {
    border: 1px black solid;
    }
    </style>

    <table>

        <!--
    在我们的HTML中还为我们提供了 thead tbody tfoot 来将表格分成三个部分
    thead 表示表格的头部,可以将头部的tr放到thead中,thead中的内容,永远会显示在表格的头部
    tfoot 表示表格的底部,可以将底部的tr放到tfoot中 tfoot中的内容,永远会显示在表格的底部
    tbody 表示表格的主体,可以将主体内容的tr放到tbody中
    -->
    <thead>
    <tr>
    <th>日期</th>
    <th>收入</th>
    <th>支出</th>
    <th>合计</th>
    </tr>
    </thead>
    <tbody>
      <tr>
      <td>2017.1.4</td>
       <td>500</td>
      <td>400</td>
      <td>100</td>
      </tr>
    </tbody>
    <tfoot>
    <tr>
    <td></td>
    <td></td>
    <td>合计</td>
    <td>500</td>
    </tr>
    </tfoot>
    </table>

    2.表单

    在网页中,我们通过表单来向服务器提交信息 在网页中使用form标签来创建一个表单,form中还必须有一个action属性
    action需要的是一个服务器的地址,这样当提交表单时,我们所填写的信息将会提交到action对应的地址
    <body>
      <form>
    文本框
    1. 使用input标签来创建一个文本框,文本框需要一个type属性,属性值是text
    2. 如果希望表单中的内容会提交到服务器中,还必须为元素指定一个name属性,当添加了name属性以后,填写的内容才会被提交到服务器
    3. 用户填写的内容,默认会以查询字符串的形式发送给服务器,username=admin&password=123123,
    查询字符串实际上就是一个名值对结构,名字就是表单项的name属性值,而值是用户填写的内容,多个名值对之间使用&连接
    这样数据发送给服务器以后,服务器就可以根据name来获取用户填写的值
       用户名 <input type="text" name="username" />
    密码 <input type="password" name="password" />
    单选按钮
    1. 使用input标签来创建单选按钮,它的type属性值是radio
    2. 单选按钮需要通过name属性进行分组,name属性值相同属于一组
    3. 像这种选择框,不需要用户填写内容的,还必须指定一个value属性 ,
    如果指定了value属性,则当提交表单时,value属性的值将会提交到服务器
    4. 如果需要设置某个单选按钮或多选框为默认选中状态 可以在元素中添加一个属性checked="checked"
    性别 <input type="radio" name="gender" value="male" />男
    <input type="radio" name="gender" value="female" checked="checked" />女
    多选框
      1. 使用input来创建多选框,它的type属性是checkbox
    爱好 <input type="checkbox" name="hobby" value="lq" /> 篮球
    <input type="checkbox" name="hobby" value="ymq" /> 羽毛球
    <input type="checkbox" name="hobby" value="ppq" checked="checked" /> 乒乓球
    下拉列表
    1. 使用select标签来创建一个下拉列表
    2. 使用option标签来向下拉列表中添加选项
    3. name属性需要指定给select,value需要指定给option
    4. 在select标签中还可以使用optgroup来对选项进行分组
    5. 可以通过为option添加一个属性 selected="selected" 来将其设置为默认选中
    6. 如果在select中添加一个 multiple="multiple" ,则下拉列表会变成多选的下拉列表
    <select name="star" multiple="multiple">
    <optgroup label="女明星">
    <option value="fbb">范冰冰</option>
    <option value="zw">赵薇</option>
    <option value="lxr">林心如</option>
    </optgroup>
    <optgroup label="男明星">
    <option value="ldh">刘德华</option>
    <option value="wyz">吴彦祖</option>
    <option value="pcj" selected="selected">潘长江</option>
    </optgroup>
    </select>
     提交按钮:提交按钮可以将表单中的信息提交到服务器
    重置按钮:可以将表单恢复到默认状态
    按钮:这个按钮只有一个功能就是被点
    不同的是button是成对的标签,而input是自结束标签,
    相比来说button标签更灵活一些
          <input type="submit" value="注册" />
    <input type="reset" value="Reset" />
    <input type="button" value="按钮" />
    <button type="submit">提交</button>
          <button type="reset">重置</button>
          <button type="button">按钮</button>
       </form>
    </body>



  • 相关阅读:
    Java Socket编程(三)发送和接收深入
    Java温故知新 集合类
    DataTable到实体类的转换 中庸
    经典设计模式
    门面模式
    java经典反射机制(1)
    装饰模式
    单子模式
    sql经典题目(1)
    如何学习struts框架?
  • 原文地址:https://www.cnblogs.com/liuyi13535496566/p/11920990.html
Copyright © 2011-2022 走看看