02表格与表单元素

最新推荐文章于 2024-09-27 00:45:01 发布

Maxcu

最新推荐文章于 2024-09-27 00:45:01 发布

阅读量129

点赞数

分类专栏： web前端基础入门文章标签： java 前端服务器

本文链接：https://blog.csdn.net/Maxcu/article/details/125687935

版权

web前端基础入门专栏收录该内容

5 篇文章 0 订阅

订阅专栏

表格与表单元素

表单用于从用户收集信息，向服务器发送数据

表格则主要是用来展示元素

table标签

表格元素的容器是table标签

<table>

	...表格中要展示的元素...

</table>

thead标签

thead标签表示表头

th标签

th标签，表示表头中的元素

<thead>
	<th>表头元素1</th> <th>表头元素2</th> <th>表头元素3</th> <th>表头元素4</th> <th>表头元素5</th>
</thead>

tbody标签

tbody标签里面的内容就是我们表格所展示的数据的主体了

tr标签

tbody中的数据是一行一行的显示的，而tr标签里面的内容就是一行的数据

td标签

td标签中的内容表示的一行中的单个格子中的数据

<tbody>
    <tr>
        <td>第1行元素1</td>
        <td>第1行元素2</td>
        <td>第1行元素3</td>
        <td>第1行元素4</td>
    </tr>
    <tr>
        <td>第2行元素1</td>
        <td>第2行元素2</td>
        <td>第2行元素3</td>
        <td>第2行元素4</td>
    </tr>
</tbody>

在这里插入图片描述

此时显示的还是没有格子的表格

为了显示出格子，可以在table标签中增加属性border，border=1表示显示出格子，border=0表示不显示出格子

合并单元格

跨行合并

在td标签中加入rowspan属性，rowspan=跨行合并的格子数量

（其实不能理解为合并，它的本质是为当前元素在这一列分配多少个格子

跨列合并

在td标签中加入colspan属性，colspan=跨列合并的格子数量

同理，它的本质也是为当前元素在这一行分配多少个格子

<table border="1">
    <tbody>
        <tr>
            <td colspan="4">Student</td>
        </tr>
        <tr>
            <td rowspan="2">class 1</td> <td>Jack</td> <td>12</td> <td>boy</td>
        </tr>
        <tr>
            <td>Jane</td> <td>13</td> <td>girl</td>
        </tr>
    </tbody>
</table>

实现效果：

表单容器 form标签

表单的结构：

表单域
- 表单控件
- 表单提示信息

form标签作为表单的容器来存放表单中的内容

<form action="">

</form>

默认是有action属性的，用于后续学习的一些操作，暂时忽略

<form action="url地址"   method="提交方式get/post"  name="表单域的名称"></form>

表单控件 input

input控件表示的是输入表单元素

input标签具有属性type，不同的type，为我们提供不同类型的输入操作

type=“text”

一般的输入框

在这里插入图片描述

type=“password”

密码输入框，输入的文本会以*的形式展示

在这里插入图片描述

type=“radio”

radio表示一个单选按钮

[(img-CYqz7OEV-1657296333865)(https://raw.githubusercontent.com/danjuan-77/picgo/main/202207052221937.png)]

type=“checkbox”

checkbox表示一个复选框

在这里插入图片描述

type=“submit”

submit是生成一个提交按钮,当点击这个按钮之后就会将表单的信息全部都传递给后台服务器

在这里插入图片描述

type=“reset”

重置按钮,它可以还原表单元素的初始的默认状态

在这里插入图片描述

type=“button”

普通按钮,不会自动的像reset和submit按钮一样完成一些功能,他常常和js结合一起使用

在这里插入图片描述

input 的相关属性

placeholder=“”

存在于text/password文本框中的提示信息

maxlength=“”

限制文本输入的长度

name=“”

为当前控件取个名字，结合radio控件使用，当input控件的name属性都相同时才能实现多选

label标签

用于绑定一个表单元素,当点击label标签内的文本的时候,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,增加用户体验
for属性应当与相关元素的id属性相同

<body>
    <form action="">
        <label for="username">用户名</label>
        <input type="text" placeholder="用户名" id="username">
        <label for="password">密码</label>
        <input type="password" placeholder="密码" id="password">
        <label for="boy">男</label>
        <input type="radio" name="sex" id="boy">
        <label for="girl">女</label>
        <input type="radio" name="sex" id="girl">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="checkbox" name="" id="">
        <input type="submit" name="" id="">
        <input type="button" name="" id="">
        <input type="reset" name="" id="">
    </form>
</body>

实现效果

表单控件select

select控件表示下拉表单

这是一种列表，如果有多个选项让用户进行选择，可以将选项合在一个长长的下拉列表当中，这样可以节省页面空间

格式：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
</select>

在option标签的属性中加入selected表示默认的选项

籍贯:
    <select>
        <option>水星</option>
        <option>火星</option>
        <option>木星</option>
        <option>金星</option>
        <option>土星</option>
        <option selected>地球</option>
    </select>

在这里插入图片描述

表单控件textarea

textarea表示的是文本域，当用户输入的信息比较多的时候我们不能使用文本框表单，这个时候我们可以使用<textarea>标签 ,这个控件中的属性 cols：控制每行最多的字符数量 rows：控制最多写多少行

练习

<body>
    <h1>问卷调查</h1>
    <form action="">
        <label for="username">用户名</label>
        <input type="text" name="" id="username" placeholder="用户名">
        <br>
        <label for="password">密码</label>
        <input type="password" name="" id="password" placeholder="密码">
        <br>
        <label for="sex">性别</label>
        <input type="radio" name="" id="sex">
        <input type="radio" name="" id="sex">
        <br>
        <label for="">最喜欢的运动</label>
        <select name="" id="">
            <option value="" selected>足球</option>
            <option value="">篮球</option>
            <option value="">羽毛球</option>
            <option value="">游泳</option>
        </select>
        <br>
        <input type="submit" name="" id="">
    </form>
</body>