form表单和table表格总结

最新推荐文章于 2023-09-11 22:32:58 发布

甦

最新推荐文章于 2023-09-11 22:32:58 发布

阅读量562

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/2302_76714358/article/details/129780638

版权

一、表单

1.1form标签是用于指定表单数据的提交方式和地址，它有几种性质

name：用于指定表单的名称，可以方便后面的提交使用。

id：这是表单的唯一名称，一般用于提交或样式设置。

action：用于定义表单数据的提交地址。

method：用于指定表单数据的提交方式有get、post、put、delete四种常用值。

·get：以该方式提交的数据会在浏览器地址栏中显示，且该数据不能超过4k大小。

·post：以该方式提交会将数据放到请求头中，也不会在浏览器地址栏中显示，理论上以这种方式提交没有大小限制。

·put：用于修改数据。

·delete：用于删除数据。

enctype：用于指定表单提交的数据类型，有multipart/form-data和application/x-www-form-urlencoded两种类型。multipart/form-data以二进制的方式提交,一般用于文件上传，application/x-www-form-urlencoded以文本的方式提交，是常用方式，默认值。

1.2文本输入框

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

name：用于表单提交，将数据提交到后端

id：给这个输入框唯一的值，一般用于Javascript来获取时使用

value:代表这个输入框所输入的值

size：用于指定这个输入框的长度

maxlength：用于指定这个输入框输入值的最大长度

placeholder：用于指定在输入框中没有值是的提醒信息

<form name="form1" id="form1" action="http://baidu.com" >
   输入姓名 <input type="text" name="输入姓名" value="请输入姓名" size="10" maxlength="10" >
   <br>输入姓名 <input type="text" name="输入姓名"  size="10" maxlength="10"  placeholder="请输入姓名">
   </form>

<input type="color" name="" id="" value="" >
        <input type="date" name="" id="" value="" >
        <input type="datetime-local" name="" id="" value="" >
        <input type="time" name="" id="" value="" >
        <input type="url" name="" id="" value="" >
        <input type="range" name="" id="" value="" >
        <input type="submit" name="send" value="注册用户" >

1.3单选框

单选框是使用input标签，但其type值为radio，一般用于多个值只选一个的情况。有以下属性

name：给这个单选框指定一个组名，多个单选框只有name属性相同才会是同一个组

value：单选框的值

checked：这是一个布尔值（真和假），如果值为真（true）即为选中，值为假（false）即未选中

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

1.3多选框

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

<input type="checkbox" value="football" name="fav" />足球
<input type="checkbox" value="篮球" name="fav" />篮球
<input type="checkbox" value="LOL" name="fav" />LOL
<input type="checkbox" value="韩剧" name="fav" />韩剧
<input type="checkbox" value="王者荣耀" name="fav" />王者荣耀

1.4文本输入域

文本输入域用于输入长文本的内容，使用textarea，它有以下属性

name：用于获取文本域的值

rows：用于指定文本域的高度（行数）

cols：用于指定文本（列数）

<textarea name="comment" rows="5" cols="30" placeholder="您的建议或者意见"></textarea>

1.5下拉列表

下拉列表是用于选择使用的，可以是单选也可以是多选。使用seclect标签来指定，有以下属性。

name：用于获取下拉框的值

multiple：指定是否可以多选

size：用于指定可看选项个数

子标签是option，用于指定下拉选项，它的value属性用于指定这个选项的值

您的家庭住址是：
<select name="address">
<option value="-1">请选择您的家庭地址</option>
<option value="永川">永川</option>
<option value="江北" selected>江北</option>
<option value="万州">万州</option>
</select>

1.6文件上传

文件上传使用input标签，type属性为file，常用的属性也是name

<input type="file" name="avatar" id="avatar" >

1.7提交按钮

提交使用input标签，type属性为submit

<input type="submit" value="提交">

1.8重置按钮

重置使用input标签，type属性为reset

<input type="reset" value="重置">

二、表格

表格标签用于数据展示，它涉及table、tr、td、th等子标签

2.1 table标签

table标签有以下属性

width：用于指定表格的宽度，单位是像素

border：用于定义表格的边框，类型为数字为正数，值越的边框越粗

cellpadding：定义单元格的内边距（单元格中的内容与单元格的边之间的距离）

cellspecing：定义单元格的外边距（单元格与单元格的距离）

align：定义表格的对齐方式

2.2 table标签的子标签

caption：用于定义表格的标题

thead：用于定义表头部分

tbody：用于定义表体部分

tfoot：用于定义表尾部分

tr：用于定义表格的一行

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

td：用于定义一个单元格 td 标签有2个属性

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

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

table标签的应用如下

<!DOCTYPE html>
<html lang="en">
<head>
    <title>表格</title>
</head>
<body>
    <table width="500" border="1" cellpadding="10" cellpadding="1" cellspacing="0" align="center">
        <caption>这是表格标题</caption>
        <tr>
            <th>居中加粗</th>
            <td width="200">表格宽度</td>
            <td align="center" >居中</td>
        </tr>
        <tr>
            <td rowspan="2">合并两行</td>
            <td>刘备</td>
            <td>13</td>
        </tr>
        <tr align="center">
            <td>整行居中</td>
            <td>整行居中</td>
        </tr>
        <tr>
            <td colspan="2">合并两列</td>
            <td>别看我，就是凑数的</td>
        </tr>
    </table>
</body>
</html>

甦

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
form表单和table表格总结

name：用于指定表单的名称，可以方便后面的提交使用。id：这是表单的唯一名称，一般用于提交或样式设置。action：用于定义表单数据的提交地址。method：用于指定表单数据的提交方式有get、post、put、delete四种常用值。·get：以该方式提交的数据会在浏览器地址栏中显示，且该数据不能超过4k大小。·post：以该方式提交会将数据放到请求头中，也不会在浏览器地址栏中显示，理论上以这种方式提交没有大小限制。·put：用于修改数据。·delete：用于删除数据。
复制链接

扫一扫