HTML基础学习第五篇（HTML表单与输入）_html表单填入信息-CSDN博客

本文链接：https://blog.csdn.net/xiaomoge__/article/details/126845110

本文详细介绍了如何在HTML中创建一个包含姓名、密码输入、性别选择、单选与复选框、下拉列表及提交按钮的表单，涵盖了文本域、密码输入、单选按钮、复选框、下拉列表等常见元素的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、表单

表单是一个包含表单元素的区域；

表单元素是允许用户在表单中输入内容，比如：文本域（lextarea）、下拉列表、

单选框（radio-buttons）、复选框（checkboxes）等等

表单使用表单标签:<form>来设置：

<from>

imput元素

</from>

二、常见的表单输入元素

多数情况下使用表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。常见的输入类型如：

文本域（Text Fields）

1、文本域通过<input type="text">标签来定义，当需要在表单中输入字母、数字等内容时，

就会用到文本域。

<form>

First name:<input type="text" name="firstname"><br>

Last name:<input type="text" name="lastname">

</form>

2、密码字段

使用<input type="password">来定义：

<form>

Password:<input type="password" name="password">

</form>

3、单选按钮(Radio Buttons)

使用<input type="radio">来定义表单单选按钮：

<form>

<input type="radio" name="sex" value="男">男

<input type="radio" name="sex" value="女">女

</form>

4、复选框(Checkbox)

使用<input type="checkbox">定义复选框，用户可在其中选取一个或多个

<form>

</from>

5、下拉单选列表

使用<select>定义一个下拉列表：

<form>

</select>

</form>

6、提交按钮（Submit Button）

<input type="submit">定义了提交按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接受到的数据进行相关的处理。

用户名：<input type="text" name="user">

</form>

总结以上知识点：实现以下内容

代码如下

<!DOCTYPE html>
<html>
     <head>
	    <meta charset="UTF-8">
	     <title>
		    小莫个人信息
		 </title>
	 </head>
	 <body>
	    <h1>请输入个人信息</h1>
		<form action="test-6-2.html" method="get">
		姓名
		<input type="text" name="name"><br>
		银行卡密码
		<input type="password" name="password"><br>
		性别
		<input type="radio" name="sex" value="男">男
		<input type="radio" name="sex" value="女">女
		<input type="radio" name="sex" value="人妖">人妖<br>
		是否单身
		<select name="single">
		    <option value="">请选择</option>
			<option value="单身">单身</option>
			<option value="不单身">不单身</option>
		</select><br>
		个人爱好
		<input type="checkbox" name="hobby1" value="唱歌">唱歌
		<input type="checkbox" name="hobby2" value="看书">看书
		<input type="checkbox" name="hobby3" value="刷视频">刷视频
		<input type="checkbox" name="hobby4" value="打游戏">打游戏
		<input type="checkbox" name="hobby5" value="干饭">干饭<br>
		
		<input type="submit" value="提交">
		</form>
	 </body>
</html>