week02 HTML 表格和表单

最新推荐文章于 2024-10-13 19:00:19 发布

decrystal

最新推荐文章于 2024-10-13 19:00:19 发布

阅读量144

点赞数

分类专栏： skyworth 文章标签： html

本文链接：https://blog.csdn.net/qq_30166005/article/details/109708935

版权

skyworth 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的表单元素，包括文本输入、密码输入、多选框、单选框、提交按钮、选择按钮及文件上传等，并展示了如何使用input标签的不同type属性创建这些元素。此外，还探讨了表格的创建、属性设置如边框、单元格大小、合并以及对齐方式。最后，讲解了表单标签、属性及其相关标签如textarea、select和label的用法，以及如何通过这些元素搜集用户信息。

摘要由CSDN通过智能技术生成

1.1 HTML 表单介绍

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签来设置:

例子:表单内的文本输入框

<form>
.
<input  type="text">
.
</form>

1.2 表单input控件输入类型
多数情况下被用到的表单标签是输入标签（）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

1.2.1 text 文本输入类型:

文本域通过<input type="text">标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

1.2.2 password 密码输入类型

文本域通过<input type="password "> 标签来设定，当用户要在表单中"键入非显示密码"等内容时，就会用到文本域。

1.2.3 checkboxes 多选框类型

文本域通过<input type="checkboxs"> 标签来设定，当用户要在表单中"键入非显示密码"等内容时，就会用到文本域。

1.2.4 radio 单选框

文本域通过标签来设定，当用户要在表单中"键入单选内容时"等内容时，就会用到文本域。

1.2.5 submit提交按钮

文本域通过<input type="submit"> 标签来设定，当用户要在表单中"提交其他input值时"等内容时，就会用到文本域。

1.2.6 select选择按钮

文本域通过<input type="select">来设定，当用户要在表单中"进行多项选择",等内容时，就会用到文本域。

1.2.7 file文件提交按钮

文本域通过<input type="file">来设定，当用户要在表单中"进行上传文件",等内容时，就会用到文本域。

2.代码演示：

2.1表格标签

在这里插入图片描述

<table>
    <caption>天气情况</caption>
    <tr>
        <th>日期</th>
        <th>天气情况</th>
        <th>出行情况</th>
    </tr>
    <tr>
        <td>2020/1/1</td>
        <td><img src="./p/1.jpg" alt=""></td>
        <td>天气晴朗,适合出行</td>
    </tr>
    <tr>
        <td>2020/1/2</td>
        <td><img src="./p/2.jpg" alt=""></td>
        <td>有小雨,出门请带伞</td>
    </tr>
</table>

输出：在这里插入图片描述

2.2语义化标签：不会产生效果,更会符合html规范

在这里插入图片描述

<table boder="1px">
    <caption>天气情况</caption>
    <thead>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2020/1/1</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天气晴朗,适合出行</td>
        </tr>
        <tr>
            <td>2020/1/2</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出门请带伞</td>
        </tr>
    </tbody>
    <tfoot>
        
    </tfoot>
</table>

注意⚠️：其中tbody是可以出现多次的,thead和tfoot只能出现一次
输出：
在这里插入图片描述

2.4表格属性:边框和单元格的大小

在这里插入图片描述

<table border="20" cellpadding="30" cellspacing="20">
		    <caption>天气情况</caption>
		    <thead>
		        <tr>
		            <th>日期</th>
		            <th>天气情况</th>
		            <th>出行情况</th>
		        </tr>
		    </thead>
		    <tbody>
		        <tr>
		            <td>2020/1/1</td>
		            <td><img height="20px" src="./p/1.jpg" alt=""></td>
		            <td>天气晴朗,适合出行</td>
		        </tr>
		        <tr>
		            <td>2020/1/2</td>
		            <td><img src="./p/2.jpg" alt=""></td>
		            <td>有小雨,出门请带伞</td>
		        </tr>
		    </tbody>
		    <tfoot>
		        
		    </tfoot>
		</table>

在这里插入图片描述

2.5表格属性:单元格的合并

行合并

<table border="1" cellpadding="30" cellspacing="1">
		    <caption>天气情况</caption>
		    <thead>
		        <tr>
		            <th colspan="2">日期</th>
		            <th>天气情况</th>
		            <th>出行情况</th>
		        </tr>
		    </thead>
		    <tbody>
		        <tr>
		            <td>2020/1/1</td>
		            <td>白天</td>
		            <td>晴朗</td>
		            <td>天气晴朗,适合出行</td>
		        </tr>
		        <tr>
		            <td>2020/1/2</td>
		            <td>白天</td>
		            <td>雨天</td>
		            <td>有小雨,出门请带伞</td>
		        </tr>
		    </tbody>
		</table>

输出：在这里插入图片描述
合并列

<table border="1" cellpadding="30" cellspacing="1">
		    <caption>天气情况</caption>
		    <thead>
		        <tr  align="right">
		            <th colspan="2">日期</th>
		            <th>天气情况</th>
		            <th>出行情况</th>
		        </tr>
		    </thead>
		    <tbody>
		        <tr>
		            <td rowspan="2">2020/1/1</td>
		            <td>白天</td>
		            <td>无雨</td>
		            <td>适合出行</td>
		        </tr>
		        <tr>
		            <td>夜晚</td>
		            <td>晴朗</td>
		            <td>天气晴朗,适合出行</td>
		        </tr>
		        <tr>
		            <td rowspan="2">2020/1/2</td>
		            <td>白天</td>
		            <td>雨天</td>
		            <td>有小雨,出门请带伞</td>
		        <tr>
		            <td>夜晚</td>
		            <td>雨天</td>
		            <td>有小雨,出门请带伞</td>
		        </tr>
		    </tbody>
		</table>

输出：在这里插入图片描述

2.6表格属性:单元格对齐方式

在这里插入图片描述
输出：

3.表单

3.1表单标签

form标签: 表单的最外层容器
input标签: 用于搜集用户信息,根据不同的type属性值,展示不同的控件

<!-- 表单 -->
<form action="http://www.sunlizhao.cn">
    输入框: 
    <input type="text"> <br>
    密码框: 
    <input type="password"> <br>
    复选框: 
    <input type="checkbox">苹果
    <input type="checkbox">香蕉
    <input type="checkbox">葡萄 <br>
    单选框: 
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女  <br>
    上传文件: 
    <input type="file"> <br>
    提交按钮: 
    <input type="submit">
    重置按钮: 
    <input type="reset"> <br>
</form>

输出：在这里插入图片描述

3.2表单属性

3.2.1action 提交的位置

action属性点击提交按钮后,数据的提交位置

<form action="www.baidu.com">//数据往www.baidu.com提交地址，一般这里写的是后端的地址，往后端发送数据，checked 设置默认值

代码：

<form action="#">
    复选框: 
    <input type="checkbox" checked>苹果
    <input type="checkbox" checked>香蕉
    <input type="checkbox">葡萄 <br>
    单选框: 
    <input type="radio" name="gender">男
    <input type="radio" name="gender" checked>女  <br>
</form>

在这里插入图片描述
disabled 禁止选择某一项
代码：

<form action="#">
    复选框: 
    <input type="checkbox" checked>苹果
    <input type="checkbox" checked>香蕉
    <input type="checkbox" disabled>葡萄 <br>
    单选框: 
    <input type="radio" name="gender">男
    <input type="radio" name="gender" checked>女  <br>
</form>

输出：
在这里插入图片描述
placeholder在数据框中添加提示信息

<form action="#">
    用户名: 
    <input type="text" placeholder="请输入用户名"> <br>
    密码框: 
    <input type="password" placeholder="请输入密码"> <br>
</form>

输出：
在这里插入图片描述

3.3表单相关标签

3.3.1textarea 多行文本框

在这里插入图片描述
代码：

<form action="#">
    <textarea cols="30" rows="10"></textarea> <hr>
</form>

输出：
在这里插入图片描述

3.3.2select下拉菜单

<form action="#">
    下拉菜单
    <select>
        <option>北京</option>
        <option selected>上海</option>
        <option>广州</option>
    </select>   
</form>

输出：在这里插入图片描述
通过selected 和disabled实现提示信息,且不可选择

<form action="http://www.sunlizhao.cn">
    下拉菜单
    <select>
        <option selected disabled>请选择</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
</form>

输出：
在这里插入图片描述
size属性设置下拉菜单展示的行数,默认为1
代码：

<form action="http://www.sunlizhao.cn">
    下拉菜单
    <select size="2">
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
</form>

输出：
在这里插入图片描述
multiple属性还支持在上传文件中使用
代码：<input type="file" multiple>

3.3.5label辅助表单

通过label标签可以实现单选框或复选框中,符号和文字是一个整体

<form action="#">
    单选框: 
    <input type="radio" name="gender" checked id="man">
    <label for="man">男</label>
    <input type="radio" name="gender" id="woman">
    <label for="woman">女</label>
    <br>
    复选框: 
    <input type="checkbox" id="apples">
    <label for="apples">苹果</label> 
    <input type="checkbox" id="banana">
    <label for="banana">香蕉</label> 
    <input type="checkbox" id="grape">
    <label for="grape">葡萄</label> <br>
</form>