html表格+表单

  • Post author:
  • Post category:其他


  1. 表格


表格就是用来表示一些格式化的数据的,比如:课程表、银行对账单


1、在HTML中,使用table标签来创建一个表格


2、在table标签中使用tr来表示表格中的一行,有几行就有几个tr


3、在tr中需要使用td来创建一个单元格,有几个单元格就有几个td



例:创建两行实列的表格

<table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        

      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>

      </tr>
</table>

表格的属性

  1. 设置宽高



width:设置宽;height:设置高

  1. 设置边框线


border:边框线大小 边框线样式 边框线的颜色

  1. 设置单线边框:



border-spacing:0px ;



border-collapse:collapse

  1. 调整td文字在表格中的位置



vertical-align:水平居中



text-align 垂直居中

  1. 设置隔行变色



tr:nth-child(even) 括号中的值偶数行:2n;奇数行:2n+1

  1. 鼠标移入到tr以后,改变颜色

  tr:hover{
        background-color: red;
      }
  1. 表单


表单:


将用户信息等本地的数据信息提交给服务器的


比如:百度的搜索框 注册 登录这些操作都需要填写表单

  1. 创建



form标签


属性:

action属性(必须要写)


指向的是一个服务器的地址,当我们提交表单时将会表单相关的数据提交到action属性对应的地址

  1. input


  1. 文本



type属性:text


name属性:提交内容的名字;如果希望表单项中的数据会提交到服务器中,必须指定一个name属性


value属性值:作为文本框的默认值显示;就是用户输入的内容,也就是要提交给服务器的值


  1. 密码:


type属性值:password


name属性:提交密码的名字


  1. 单选按钮

type属性:radio
            - name属性进行分组,属性相同是一组按钮,如果不设置,则都可以选择
            - value属性必须设置,这样被选中的表单项的value属性值将会最终提交给服务器        
            - checked属性  默认选中  可以直接添加属性,不写属性值
  1. 多选

input创建一个多选框
            -type属性:checkbox
            -checked属性  默认选中
  1. 提交按钮/重置

type属性值:submit
            -value属性:指定按钮上的文字,默认是提交
创建一个重置按钮,type="reset" 
                点击重置按钮以后表单中内容将会恢复为默认值
  1. 补充


1: autocomplete=”off” 关闭自动补全


2: readonly 设置为只读,不能修改


3: disabled 设置为禁用


4: autofocus 自动获取焦点


5: placeholder 表单提示内容

  1. 文本域


textarea创建一个文本域


-name属性 提交给服务器的名字


-cols属性 设置宽度


-rows属性 设置高度

<textarea name="" cols="40" rows="10"></textarea>
  1. 下拉框


elect来创建一个下拉列表


-name属性设置给select,


-value属性设置给option


-selected属性设置给option,将选项设置为默认选中


– 在下拉列表中使用option标签来创建一个一个列表项

  1. button


button标签来创建按钮


也可以用type属性来更改button的类型,例如submit、reset、button


方式和使用input类似,它是成对出现的标签,使用起来更加的灵活



版权声明:本文为cloarl原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。