html 表格表单

最新推荐文章于 2024-10-28 18:09:57 发布

原创最新推荐文章于 2024-10-28 18:09:57 发布 · 1.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #html5 #html #css

本文介绍了HTML中表格的创建，包括table、tr、td、rowspan和colspan的使用，以及表格样式的设置，如边框、隔行换色等。接着讲解了长表格的thead、tbody和tfoot的使用，以及表单的创建，如form、input、select、textarea等元素的属性和用途，以及如何创建单选按钮、复选框和下拉列表。

一，表格

1、在HTML中，使用table标签来创建一个表格
2、在table标签中使用tr来表示表格中的一行，有几行就有几个tr
3、在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
4、table标签里有自带的属性： border="1" width="40%" align="center"
5、rowspan用来设置纵向的合并单元格
6、colspan横向的合并单元格

二，表格样式

1.表格边框属性 border: 1px solid red,设置红色宽度为1像素的边框

2.table和tr,td设置border就会出现双线边框，解决此问题有两种方法

1）： border-spacing:0px

2）：border-collapse [kə'læps] 设置行和单元格的边是否合并
如果设置了边框合并，则border-spacing自动失效
可选值
separate 默认值，不合并
collapse 合并边框

3.设置隔行换色 tr:nth-child(even)

4.鼠标移入tr后改变颜色 tr:hover { background-color: green; }

5.调整表格内文字的位置

1）vertical-align

2）text-align

6.可以使用th标签来表示表头中的内容，它的用法和td一样，不同的是它会有一些默认效果（默认加粗）

三，长表格

有一些情况下表格是非常的长的
这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签
thead 表头永远在表格的头部
tbody 表格的主体永远在表格中间
tfoot 表格的底部永远在表格底部
用来区分表格不同的部分，顺序，浏览器会自动调整

如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行需要通过tbody > tr

四，表单（将用户信息等本地的数据信息提交给服务器的比如：百度的搜索框注册登录这些操作都需要填写表单）

1.创建表单 form标签
   属性：
       action属性（必须要写）
       指向的是一个服务器的地址，当我们提交表单时将会提交到action属性对应的地址

2.添加表单项
使用form创建的仅仅是一个空白的表单，
我们还需要向form中添加不同的表单项

1）input来创建一个文本框，
   type属性是text
   name属性：提交内容的名字
       如果希望表单项中的数据会提交到服务器中，必须指定一个name属性
   value属性值：作为文本框的默认值显示

用户名
<input type="text" name="username" value="zhangsan" />

2）input创建一个密码框
type属性值是password
name属性：提交密码的名字

密码
<input type="password" name="password" />

3）input来创建一个数字输入框，
type属性是number
name属性：提交的数字的名字

年龄
<input type="number" name="number" placeholder="请输入年龄" />

可以使用min 和属性指定该字段可以具有的最小值和最大值。例如，给例子指定最小值为 0，最大值为 100：

类型为的 <input> 元素不支持像 size 之类的调整大小属性。你必须通过借助 CSS 来改变它们的尺寸大小。"number"

<input type="number" placeholder="x10" step="10" min="0" max="100" id="number">

然后我们添加一些 CSS 来缩小 id 为的元素的宽度："number"

#number { width: 3em; }

4）input创建一个单选按钮
       - type属性：radio
       - name属性进行分组，属性相同是一组按钮，如果不设置，则都可以选择
       - value属性必须设置，这样被选中的表单项的value属性值将会最终提交给服务器
       - checked="checked"属性默认选中

   性别 <input type="radio" name="gender" value="male" id="male" />男 <input type="radio" name="gender" value="female" checked="checked" id="female" />女

5）input创建一个多选框
       -type属性:checkbox
       -checked="checked"属性默认选中

   爱好
   <input type="checkbox" name="hobby" value="zq" />足球 <input type="checkbox" name="hobby" value="lq" />篮球 <input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
   <input type="checkbox" name="hobby" value="ppq" checked="checked" />乒乓球

6）select来创建一个下拉列表
       -name属性设置给select，
       -value属性设置给option
       -selected="selected"，将选项设置为默认选中

   你喜欢的明星
   <select name="star">
   在下拉列表中使用option标签来创建一个一个列表项
   <option value="zbs" selected="selected">赵本山</option>
   <option value="fbb">范冰冰</option>
   <option value="lxr">林心如</option>
   </select>

7）textarea创建一个文本域

自我介绍 <textarea name="info"></textarea>

8）input创建一个提交按钮，点击后表单就会提交
           -type属性值：submit
           -value属性：指定按钮上的文字

   <input type="submit" value="注册" />

9）创建一个重置按钮，type="reset"
           点击重置按钮以后表单中内容将会恢复为默认值，

   <input type="reset" />

10）创建一个单纯的按钮，
           这个按钮没有任何功能，只能被点击

   <input type="button" value="按钮" />

11）button标签来创建按钮
方式和使用input类似，它是成对出现的标签，使用起来更加的灵活

12）input属性补充
1: autocomplete="off" 关闭自动补全
2: readonly 设置为只读，不能修改
3: disabled 设置为禁用
4: autofocus 自动获取焦点
5: placeholder 提示内容