【HTML学习笔记八】表单

最新推荐文章于 2025-03-22 09:58:54 发布

思索与猫

最新推荐文章于 2025-03-22 09:58:54 发布

阅读量177

点赞数

分类专栏： HTML学习笔记文章标签： HTML 学习笔记

本文链接：https://blog.youkuaiyun.com/qq_28997735/article/details/97622286

版权

HTML学习笔记专栏收录该内容

9 篇文章

订阅专栏

一.表单

表单使用form标签设置

<form>
.
  	input元素
.
</form>

二.输入元素

使用input标签，类型由type定义

1.文本域

文本域通过<input type="text"> 标签来设定,宽度为20个字符。

昵称：<input type = "text" name = "nickname">

2.密码字段

<input type="password"> 标签来定义密码字段

密码：<input type = "password" name = "password">

3.单选按钮

<input type="radio"> 标签定义表单单选框选项

<input type = "radio" name = "sex" value = "男">男<br/>
<input type = "radio" name = "sex" value = "女">女

4.复选框

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

喜欢的食物：<br/>
<input type = "checkbox" name = "food" value = "汉堡" >汉堡<br/>
<input type = "checkbox" name = "food" value = "炸鸡" >炸鸡<br/>
<input type = "checkbox" name = "food" value = "可乐" >可乐

5.下拉列表

<select>和<option>标签定义了一个下拉列表
通过selected属性可以定义预选下拉列表

出生年：<br/>
<select>
	<option value = "80">80后</option><br/>
	<option value = "90" selected>90后</option><br/>
	<option value = "00">00后</option><br/>
</select>

三.提交按钮

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

<form name="input" action="save.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

四.创建按钮

button类型可以创建按钮，并对按钮上的文字自定义

<form action="">
<input type="button" value="我全都要!">
</form>

组合：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8">
		<title>表单</title>
	</head>
	<body>
		<form name = "input" action = "save.php" method = "get">
			姓：<input type = "text" name = "姓"><br/>
			名：<input type = "text" name = "名"><br/>
			密码：<input type = "password" name = "password"><br/>
			性别：<br/>
			<input type = "radio" name = "sex" value = "男">男<br/>
			<input type = "radio" name = "sex" value = "女">女<br/>
			喜欢的食物：<br/>
			<input type = "checkbox" name = "food" value = "汉堡" >汉堡<br/>
			<input type = "checkbox" name = "food" value = "炸鸡" >炸鸡<br/>
			<input type = "checkbox" name = "food" value = "可乐" >可乐<br/>
			出生年：<br/>
			<select>
				<option value = "80">80后</option>
				<option value = "90" selected>90后</option>
				<option value = "00">00后</option>
			</select>
			<br/>
			<input type="button" value="我全都要!"><br/>
			<input type="submit" value="Submit">
		</form>
	</body>
</html>

结果：
在这里插入图片描述