HTML中常用的编排表单标签和以块级元素、内联（行内）元素！

CH040708

于 2024-09-28 16:59:35 发布

阅读量224

点赞数 5

文章标签： html 前端 java

本文链接：https://blog.csdn.net/CH040708/article/details/142613090

版权

#本文详细介绍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"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <input  type="submit" value="提交">
          <input type="reset" value="重写"> </td></tr>
    </table>
</body>

运行代码后如下：