CSS学习笔记-08-HTML的表格表单

Lary_c

已于 2022-12-03 11:54:46 修改

阅读量82

点赞数

分类专栏： CSS 文章标签：前端 css3 html

于 2022-12-03 11:35:38 首次发布

本文链接：https://blog.csdn.net/weixin_53249168/article/details/128159563

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

- 8、HTML
- - 8.1、表格
  - 8.2、表单

8、HTML

8.1、表格

<table>标签
    可以将一个表格分为三个部分
    头部 thead
    主体 tbody
    底部 tfoot
    
    th tr td

8.2、表单

表单–在现实生活中用于提交数据

在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
使用form标签来创建一个表单

form的属性：
- action 表单要提交的服务器地址
```
<form action="99_target.html">
    
    </form>
```
表单里的内容

注意：数据要提交到服务器中，必须为元素指定一个name属性值
- 文本框 <input type=“text” name=“username”>

在这里插入图片描述

密码框 <input type=“password” name=“password”>

在这里插入图片描述

单选按钮
<input type=“radio” name=“sex” value=“man”>

<input type=“radio” name=“sex” value=“woman” checked>

像这种选择框，必须指定一个value属性，value属性最终会作为用户填写的值返回,name值需要相同

- checked可以将单选按钮设置为默认选中

在这里插入图片描述

多选框
<input type=“checkbox” name=“text” value=“1”>

<input type=“checkbox” name=“text” value=“2”>

<input type=“checkbox” name=“text” value=“3” checked>

与单选按钮差不多
下拉列表
<select name=“haha”>
<option value=“i”>选项一
<option selected value=“ii”>选项二
<option value=“iii”>选项三

selected设置为默认选中

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vbZKcbRq-1670038325977)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20220912154712641.png)]$
提交按钮
<input type=“submit” value=“注册”>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5vQHbBNS-1670038325980)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\image-20220912154726503.png)]$
表单的一些属性
- autocomplete=“off” 关闭自动补全
- readonly 将表单项设置为只读数据会提交
- diseased 将表单项设置为禁用，数据不会提交
- autofocus 设置表单项自动获取焦点

按钮：

<input type="submit">
        <input type="reset">
        <input type="button" value="按钮">
        <br><br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">按钮</button>