HTML表单控件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_okcheng/article/details/112602776

HTML第4天

表单

表单

表单的目的是为了收集用户信息

– 表单的组成部分

表单控件/表单元素
提示信息
表单域

在这里插入图片描述

表单控件

input控件

input控件的属性：
在这里插入图片描述

文本框和密码框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	 用户名： <input type="text" />
	 密码：<input type="password" />
	</body>
</html>

→
在这里插入图片描述

单选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	 用户名： <input type="text" /> <br />
	 密码：<input type="password" /> <br />
	 性别：
	 <input type="radio" name="single_choice_sex">男
	 <input type="radio" name="single_choice_sex">女  <br />
	</body>
</html>

→
在这里插入图片描述

复选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	 用户名： <input type="text" /> <br />
	 密码：<input type="password" /> <br />
	 爱好：
	 <input type="checkbox" name="multi_choice_hobbies" />唱歌
	 <input type="checkbox" name="multi_choice_hobbies" />运动  <br />
	</body>
</html>

→
在这里插入图片描述

默认选择

单选和复选都有这个功能，只需要在input标签里面添加一个checked属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	 用户名： <input type="text" /> <br />
	 密码：<input type="password" /> <br />
	 性别：
	 <input type="radio" name="single_choice_sex" checked="checked"/>男
	 <input type="radio" name="single_choice_sex" checked="checked"/>女  <br />
	 爱好：
	 <input type="checkbox" name="multi_choice_hobbies" />唱歌
	 <input type="checkbox" name="multi_choice_hobbies" />运动  <br />
	</body>
</html>

按钮组

普通按钮button、提交按钮submit、重置按钮reset、图像形式的提交按钮image

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	 用户名： <input type="text" /> <br />
	 密码：<input type="password" /> <br />
	 性别：
	 <input type="radio" name="single_choice_sex">男
	 <input type="radio" name="single_choice_sex">女  <br />
	 搜索：	<input  type="button" value="搜索"/> <!--普通按钮-->  <br />
	 提交请点击：
	 <input type="submit" /><!--提交按钮-->
	 重置请点击：
	 <input type="reset" /><!--重置按钮-->
	 重置请点击图片：
	 <input type="image" src="im.jpg" /><!--图像形式的提交按钮 src应该是图片的路径--><br />
	 
	</body>
</html>

最多字符数和文本值

最多文本值 maxlength
文本值 value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	 用户名： <input type="text" value="请输入您的用户名" /> <br />
	 密码：<input type="password" maxlength="6"/> <br />
	</body>
</html>

label标签

label标签为input元素定义标注（标签）。
作用：用于绑定一个表单元素，当点击label标签的时候被绑定的表单元素就会获得输入焦点

表单元素：比如一个input控件标签可以视为一个表单元素

for属性和 id属性 .
规定label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

例如：
在这里插入图片描述

如图，点击文字“邮箱账号” 之后光标在右侧输入框中闪烁

应用：label标签的多种使用方式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--label标签的简单使用方法-->
		<label>请输入用户名：
		<input type="text" value="请输入您的用户名" /> 
		</label>
		<br />
		 请输入密码：<input type="password" maxlength="6"/> 
		 <br />
		 <!--label标签的通用使用方法-->
		 <label for="last_name">
		 请输入名和姓：<input type="text" id="first_name"/><br /><input type="text" id="last_name"/>
		 </label>
		 <br />
	</body>
</html>

textarea控件（文本域）

如果需要输入大量信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
	文本内容
</textarea>

下拉菜单

语法：

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
</select>

表单域

表单域标签

<form> </form>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="xxx.php">
			用户名： <input type="text" /> <br />
	 		密码：<input type="password" /> <br />
	 		爱好：
	 		<input type="checkbox" name="multi_choice_hobbies" />唱歌
	 		<input type="checkbox" name="multi_choice_hobbies" />运动  <br />
			你来自哪个城市：
			<select>
				<option>北京</option>
				<option>上海</option>
				<option>广州</option>
			</select>
			你来自哪个地区：
			<select>
				<option>通州</option>
				<option>密云</option>
				<option selected="selected">大兴</option>
			</select>
		</form>
	</body>
</html>