form表单和table表格（html部分）

最新推荐文章于 2023-12-13 08:15:00 发布

落鹜秋水

最新推荐文章于 2023-12-13 08:15:00 发布

阅读量819

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/m0_74377868/article/details/129780357

版权

本文介绍了HTML中的form表单及其属性，包括name、id、action、method和enctype。接着讲解了文本输入框、单选框、多选框的使用，以及textarea文本输入域和下拉列表的创建。还提到了文件上传功能以及表格的结构和样式控制，如width、border、cellpadding和cellspacing属性。这些元素是构建交互式网页的基础。

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

form表单

form表单，它是用于指定表单数据的提交方式和地址。

其具有以下几种属性：

name：用于指定表单的名称，方便后续提交使用。
id：表单的唯一名称，一般用于提交或样式设置。
action：用于定义表单数据的提交地址。
method：用于指定表单数据的提交方式。

有以下常用值：
get：以get方式进行提交，所提交的数据会在浏览器地址栏中显示，这种提交方式所提交的数据不能超过4K大小，适用与内容较小的数据提交。
post：以post方式进行提交，这种提交方式会把数据放到请求头中，而不会在浏览器地址栏中显示，理论上这种方式提交没有大小的限制。

5.enctype：用于指定表单提交的数据类型，

有以下两个值：
multipart/form-data：以二进制流的方式进行提交，一般用于文件上传。
application/x-www-form-urlencoded：以文本的方式进行提交，常用方式，默认值。

文本输入框

文本输入框是使用 input 标签来指定，根据它的 type 属性来指定是什么样的类型的输入框。

其具有以下几种属性：

name ：用于表单提交是把数据提交到后端。
id ：给这个输入框一个唯一值。
value ：它代表是这个输入框所输入的值。
size ：用于指定这个输入框的长度。
maxlength ：用于指定这个输入框所能输入值的最大的长度。
placeholder ：用于指定在输入框中没有值是的提示信息，它是 H5 的属性。

<body>
    <input type="text" name="用户名" value="" placeholder="请输入用户名" 
      size="20" maxlength="5" minlength="1">
</body>

展示效果如下：

表示：该输入框长度为20，可输入的最大长度为5，最小为1；

单选框

单选框也是使用 input 标签，它的 type 属性的值为 radio，它一般用于多个值中只能选择一个值的情况。

如：性别，等

name：给这个单选框指定一个组名，也是数据提交后后端能够获取数据的值，多个单选框如果，而且name 属性相同才会是同一个组。
value：单选框的值。
checked：它是一个布尔值（真和假），如果值为值（true）即选中，值为假（false）则未选中。

<body>
    <input type="radio" name="gender" value="男" checked="checked"> 男 
    <input type="radio" name="gender" value="女"> 女
</body>

展示效果如下：

多选框

多选框也是使用 input 标签，但它的 type 属性的值为 checkbox，一般用于多个选择的情况。属性与单选框相同。

如：爱好，等

<body>
    <input type="checkbox" name="hobby" value="看书" checked> 看书
    <input type="checkbox" name="hobby" value="游戏"> 游戏
    <input type="checkbox" name="hobby" value="电影" checked> 电影
    <input type="checkbox" name="hobby" value="吃零食">吃零食 
</body>

展示效果如下：

文本输入域

文本输入域是用于输入长文本的内容，使用 textarea 标签。

其具有以下几种属性：

name：用于获取文本域的值。
rows：指定文本域的高度（行数）。
cols：指定文本域的宽度（列数）。

展示效果如下：

<body>
<textarea name="intro" rows="10" cols="40"></textarea>
</body>

表示：这是一个长10宽40的文本输入域。

其中还可以加入其他属性

如：

placeholder：用于指定在输入框中没有值是的提示信息，它是H5的属性。等

<body>
    <textarea name="intro" rows="10" cols="40"  placeholder="这个家伙很懒，什么也没留下"> 
    </textarea>
</body>

展示效果如下：

下拉列表

下拉列表是用于选择使用的，它可以是单选的，也可以是多选的。使用 select 标签来指定。

其具有以下几种属性：

name：用于获取下拉框的值
multiple：指定是否可以多选，
size：用于指定可看选项个数，其子标签是 option，用于指定下拉选项，它的 value 属性用于指定这个选项的值

<body>
    <select name="province"  size="4" aing="lift" >
        <option value="重庆">重庆</option>
        <option value="北京">北京</option>
        <option value="天津">天津</option>
        <option value="上海">上海</option>
    </select>
</body>

展示效果如下：

文件上传

文件上传还是使用 input 标签，它的 type 属性为 file

其常用的属性为name。

<body>
    <input type="file" name="文件上传">
</body>

展示效果如下：

table表格

列表标签

如果希望把有些内容以列表的方式来进行呈现，此时就可以使用列表标签。在HTML中，列表标签有以下几种：

无序列表
有序列表
标题列表
表格列表

其中：无序列表使用 ul 标签来定义，每一个列表顶使用一个 li 标签来定义

有序列表就是可以在每一项之前有一个序号，使用 ol 标签来定义，每一个具体的项还是使用li 标签来定义。

标题列表，在html中标题标签一共有 6 个，分别是 h1 ~ h6 ，大小逐级递减

<body>
    <h1>h1标签</h1>
    <h2>h2标签</h2>
    <h3>h3标签</h3>
    <h4>h4标签</h4>
    <h5>h5标签</h5>
    <h6>h6标签</h6>
</body>

展示效果如下：

以上只做了解，这里重点说明表格列表。

表格列表

表格标签用于数据展示的，它涉及到 table、tr、td、th等子标签。定义一个表格，我们需要使用 table 标签，如果要定义一行，我们还需要使用 tr 子标签，要在一行中定义单元格，就需要使用到 td 子标签。

其中tr之中包含td和th标签,但有差别。

tr：用于定义表格的一行
th：用于定义一个单元格，它的特点是内容加粗且居中显示
td：用于定义一个单元格

<body>
    <table width="300" border="1" cellpadding="0" cellspacing="0" align="left">
        <tr>
            <th>特征</th>
           
        </tr>
        <tr align="center">
            
            <td width="100">长得帅</td>
            
        </tr>
</body>

展示效果如下：

table表格其具有以下几种属性：

width：用于指定表格的宽度，单位是像素
border：用于定义表格的边框，值的类型是数字，而是一个正数，值越大边框越粗
cellpadding：用于定义单元格的内边距，即单元格中的内容也单元格的边之间的距离
cellspecing：用于定义单元格的外边距，即单元格与单元格之间的距离
align：用于定义表格的对齐方式

table还在以下几个子标签：

caption：用于定义表格的标题。
thead：用于定义表头部分。
tbody：用于定义表体部分。
tfoot：用于定义表尾部分。

<body>
    <table width="300" border="1" cellpadding="3" cellspacing="3" align="left">
        <caption>表格标题</caption>
        <thead>
        <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        </tr>
        </thead>
        <tbody>
        <tr align="center">
        <td  >1</td>
        <td width="100">刘备</td>
        <td>28</td>
        </tr>
        <tr align="center">
        <td>2</td>
        <td>关羽</td>
        <td>27</td>
        </tr>
        <tr align="center">
        <td >3</td>
        <td>张飞</td>
        <td>26</td>
        </tr>
        </tbody>
</body>

展示效果如下：

td 标签有几个属性需要说明：

colspan：用于定义跨列操作，也就是合并多个列

rowspan：用于定义跨行操作，也就是合并多个行

<body>
    <table width="300" border="1" cellpadding="0" cellspacing="0" align="left">
        <tr align="center">
        <td rowspan="2">1</td>
        <td width="100">刘备</td>
        <td>28</td>
        </tr>
        <tr align="center">
        <td>关羽</td>
        <td>27</td>
        </tr>
        <tr align="center">
        <td colspan="2">张飞</td>
        <td>26</td>
        </tr>
</body>

展示效果如下：

注：将单元合并后应该将其中一个删掉，不然会出现如上表格内容溢出。

如图：

落鹜秋水

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
form表单和table表格（html部分）

form表单form表单，它是用于指定表单数据的提交方式和地址。其具有以下几种属性：用于指定表单的名称，方便后续提交使用。：表单的唯一名称，一般用于提交或样式设置。：用于定义表单数据的提交地址。：用于指定表单数据的提交方式。：以get方式进行提交，所提交的数据会在浏览器地址栏中显示，这种提交方式所提交的数据不能超过4K大小，适用与内容较小的数据提交。：以post方式进行提交，这种提交方式会把数据放到请求头中，而不会在浏览器地址栏中显示，理论上这种方式提交没有大小的限制。5.
复制链接

扫一扫