#本文详细介绍HTML中列表标签中表单<form> </form>和块级元素、内联元素的使用#
一、常用的编排表单标签
1、表单标签
①前言
- HTML 中的表单是用于收集用户输入信息并将其提交给服务器进行处理的重要元素。
②表单标签<form>
- 表单由 <form> 标签开始，以 </form> 标签结束。在 <form> 标签中，通常会包含以下重要属性：<action>和<method>.
- <action> : 指定处理表单数据的服务器端脚本或页面的 URL 地址.
- <method> : 定义数据提交的方式，常见的有 GET 和 POST.
<body>
<form action="URL" method="get">
</form>
</body>③输入标签<input>
属性type控制<input>的表现形式：
根据不同的 type 属性值，输入字段拥有很多种形式。
| 文本输入框 | text | 用于输入单行文本，如用户名、地址等。 |
| 密码输入框 | password | 输入的内容会以掩码形式显示，增强安全性。 |
| 单选按钮 | radio | 一组单选按钮中，用户只能选择其中一个选项。 |
| 复选框 | checkbox | 用户可以选择多个选项。 |
| 下拉列表 | <select>、<option> | 提供多个选项供用户选择。 |
| 文本域 | <textarea> | 用于输入多行文本，如评论、反馈等。 |
| 图片提交按钮 | image | 定义图像作为提交按钮。 |
| 普通按钮 | button | 定义可点击的按钮 |
| 提交按钮 | submit | 定义提交按钮。 |
| 重置按钮 | reset | 定义重置按钮 |
<body>
<form action="">
<h2 align="center" style="color: red;">用户注册</h2>
<table border="1" width="500px" height="100" align="center"
bgcolor="pink" bordercolre="pink">
<!-- 文本输入框 text 标签 -->
<tr >
<td align="right" >用户名</td>
<td><input type="text">*</td> </tr>
<!-- 密码框 password 标签 -->
<tr >
<td align="right">密码</td>
<td><input type="password">*</td> </tr>
<tr >
<td align="right">确认密码</td>
<td><input type="password" >*</td> </tr>
<!-- 单选按钮 radio 标签 -->
<tr >
<td align="right">性别</td>
<td><input type="radio" name="sex">男
<input type="radio" name="sex" >女</td> </tr>
<tr >
<td align="right">出生日期</td>
<td><input type="text"></td></tr>
<tr >
<td align="right">联系电话</td>
<td><input type="text"></td></tr>
<tr >
<td align="right">电子邮箱</td>
<td><input type="text">*</td></tr>
<tr >
<td align="right">最高学历</td>
<td><input type="radio" name="education">中专
<input type="radio" name="education" >大专
<input type="radio" name="education">本科
<input type="radio" name="education" >研究生</td></tr>
<!-- 复选框 checkbox 标签 -->
<tr >
<td align="right">爱好</td>
<td><input type="checkbox" value="hobby">上网
<input type="checkbox" value="hobby" >篮球
<input type="checkbox" value="hobby">听歌
<input type="checkbox" value="hobby" >下棋</td></tr>
<!-- 选择框 select 标签 -->
<tr>
<td align="right">请选择喜欢的课程</td>
<td>
<select name="recouse">
<optgroup label="科目"></optgroup>
<option value="体育">体育</option>
<option value="音乐" selected>音乐</option>
</select>
</td> </tr>
<!-- 提交 submit 按钮和重置 reset 按钮标签 -->
<tr>
<td colspan="2">
<input type="submit" value="提交">
<input type="reset" value="重写"> </td></tr>
</table>
</body>运行代码后如下：
二、常用的块级元素、内联（行内）元素
1.块级元素
①前言
- 块级元素在页面中会独自占据一行，并且其前后会有换行符.
②常用的块级元素标签
- 包含有<div>、<form>、h1~h6、<hr>、<p>、<table>、<ul>等
③内联元素的特点总结
- 独占一行，前后会有换行。
- 可以设置宽度、高度、内外边距等属性。
- 宽度默认是父容器的 100%。
2.内联元素
①前言
内联元素不会独自占据一行，而是在一行内与其他内联元素依次排列。
②常用的内联元素标签
包含有<span>、< a>、< b>、< em>、< i>、< strong>、<img> 等
③内联元素的特点总结
- 不会换行，在一行内依次排列。
- 宽度和高度由内容决定。
- 不能设置上下边距。