做一个简单的HTML表单~-CSDN博客

本文链接：https://blog.csdn.net/m0_63116363/article/details/142594151

HTML表单（Forms）是用于收集用户输入的一种元素。

作用：它们允许网页的用户输入数据，如文本框、文本域、单选按钮、复选框、下拉按钮、提交按钮等，然后将这些数据发送到服务器进行处理。表单是Web应用中用户与网站交互的重要部分，常用于用户注册、登录、搜索、提交评论或购买商品等场景。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>提交个人信息</title>
</head>
<body>
  <form action="<form action="http://localhost">  <!--action属性定义了当表单提交时，数据应该发送到哪个URL,-->
      <fieldset>  <!--fieldset元素对表单中的相关元素进行分组-->
           <legend>个人信息</legend>  <!--设置fieldset组标题-->
          用户名：<input type="text" name="username"><br>
          密码：<input type="password" name="password"><br>  <!--密码输入字段，输入内容将被隐藏-->
          性别：<input type="radio" name="gender">男 <input type="radio" name="gender">女 <br>  <!--性别选择，使用单选按钮，用户需从“男”和“女”中选择一个-->
          年龄：<input type="number" name="age"><br>  <!--年龄输入字段，允许用户输入数字-->
          出生日期：<input type="date" name="date"><br>  <!--出生日期输入字段，允许用户选择日期-->
          个人介绍：<br>  <!--个人介绍文本区域，用户可以输入多行文本-->
          <textarea cols="50" rows="10" placeholder="请输入不少三百字个人介绍..."></textarea> <br>
          爱好：  <!--爱好选择，使用复选框，用户可以选中多个-->
               <input type="checkbox" name="hobby" value="singing">唱歌
               <input type="checkbox" name="hobby" value="dancing">跳舞
               <input type="checkbox" name="hobby" value="python">编程
               <input type="checkbox" name="hobby" value="diving">潜水 <br>
          <input type="submit" value="注册">  <!--提交按钮，点击后表单数据将被发送到action指定的URL-->
      </fieldset>
      <br>
      最好的朋友
      <select name="best_friend">  <!--下拉选择框，用于选择最好的朋友的名字-->
          <option value="1">李狗蛋</option>  <!--<option> 元素定义了用户可以从下拉列表中选择的一个选项。每个<option>都应该有一个唯一的value属性，这个属性在表单提交时会被发送到服务器，即使它在页面上不可见-->
          <option value="1">李狗蛋</option>
          <option value="1">李狗蛋</option>
      </select>
  </form>
</body>
</html

运行结果：

然后开始填写个人信息~