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 标签来定义。
<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>
![](https://i-blog.csdnimg.cn/blog_migrate/115c88c2e3fd7dfbd1424ad9db963c63.png)
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>
展示效果如下:
注:将单元合并后应该将其中一个删掉,不然会出现如上表格内容溢出。
如图: