DAY 6 表单系列问题-优快云博客

本文链接：https://blog.youkuaiyun.com/igotosleep/article/details/124351502

本文介绍了HTML5中表单元素的类型，包括text、password、radio、checkbox等，并详细讲解了GET和POST两种表单数据提交方式的安全性差异。此外，还探讨了表格的使用，包括tr、th、td标签，以及如何使用colspan和rowspan进行单元格合并。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

表单 form

一、表单元素
二、method (表单数据提交的方式）
- 1.GET
- 2.POST
三、表格 table

一、表单元素

1、<input type="" name="" value="">
type类型：
①text 文本框——placeholder 提示文本

<input type="text" placeholder="请输入密码"

在这里插入图片描述
②name:划定作用域，也是关键词。
③value:表单元素的值

<input id="submit" type="submit" value="注册/登录">

在这里插入图片描述
2、type类型
①password 密码
②radio 单选

<p>
            <span>🐘</span>
            <input name="gender" type="radio" value="1">
        </p>
        <p>
            <!-- name 划定作用域，也是关键词
            checked  默认选择 -->
            <span>🦒</span>
            <input checked  value="0" name="gender" type="radio">
        </p>

在这里插入图片描述

③checkbox 复选（也就是多选）

<p>
            <span>阅读</span>
            <input value="阅读" name="hobby" type="checkbox">
        </p>
        <p>
            <span>旅行</span>
            <input value="旅行" name="hobby" type="checkbox">
        </p>
        <p>
            <span>冥想</span>
            <input value="冥想" name="hobby" type="checkbox">
        </p>

在这里插入图片描述

④button 按钮
⑤submit 提交（这是一个按钮，点击会将表单信息提交到指定地址）
⑥reset 重置
⑦file 文件
⑧hidden 隐藏

二、method (表单数据提交的方式）

1.GET

信息拼接在地址后，信息不安全

<form action="http://www.jd.com" method="get">

在这里插入图片描述

2.POST

信息打包发送，信息安全

<form action="http://www.jd.com" method="get">

在这里插入图片描述

三、表格 table

1、标签
table——————表格
tr——————表格行
th——————表头
td——————单元

2、 css reset
①：table{border-collapse;}单元格间隙合并 ②：th，td{padding;}重置单元格默认填充`
3、单元格合并
①colspan 横向合并
②rowspan 纵向合并

合并技巧：1找（找到需要合并的单元格的位置以及合并几个单元格）2合（选择横向合并或纵向合并）3删除（删除溢出的单元格）