HTML常用标签之表单标签
- 前言
- 一、表单域
- 二、表单元素
-
- 1.input 输入表单元素
- 2.select 下拉表单元素
- 3.textarea 表单元素
前言
在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签
在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成
一、表单域
- 表单域是一个包含表单元素的区域
- 在HTML标签中，
<form>标签用于定义表单域，以实现用户信息的收集和传递 <form>会把它范围内的表单元素信息提交给服务器
二、表单元素
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件
表单元素可分为三类，即：input输入表单元素、select下拉表单元素、textarea文本域元素
1.input 输入表单元素
<input>标签是一个单标签，用于收集用户信息
<input>标签的属性~
几个重要属性的作用~
-
文本框（text）
<input type="text"><form action="#"> <input type="text"> </form> -
密码框（password）
<input type="password"><form action="#"> <input type="password"> </form> -
单选按钮（radio）
<input type="radio"><form action="#"> 性别：男<input type="radio">女<input type="radio"> </form> -
复选框（checkbox）
<input type="checkbox"><form action="#"> 爱好：吃饭<input type="checkbox">睡觉<input type="checkbox"> </form> -
提交按钮（submit）
<input type="submit"><form action="#"> <input type="submit" value="提交"> </form> -
重置按钮（reset）
<input type="reset"><form action="#"> <input type="reset" value="重新填写"> </form> -
普通按钮（button）
<input type="button"><form action="#"> <input type="button" value="确认"> </form> -
文件域 （file）
<input type="file"><form action="#"> 上传头像：<input type="file"> </form>
综合应用~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<!-- text 文本框 -->
用户名：<input type="text" value="请输入用户名"><br>
<!-- password 密码框 -->
密码：<input type="password"><br>
<!-- radio 单选按钮 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的name值 -->
<!-- 单选按钮和复选框可以设置checked属性，页面打开时会默认选中 -->
性别：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
<!-- checkbox 复选框 -->
爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<!-- submit按钮可以把表单域form内的表单元素里面的值提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素的初始状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 结合js使用-->
<input type="button" value="获取短信验证码"><br>
<!-- 文件域 file 用于上传文件 -->
上传头像：<input type="file">
</form>
</body>
</html>
预览图~
2.select 下拉表单元素
使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表
注意点：
<select>中至少包含一对<option>- 在
<option>中定义selected=“selected”时，当前项即为默认选中项
代码实例~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
籍贯：
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>
预览图~
3.textarea 表单元素
当用户输入内容较多的情况下，我们可以用表单元素标签替代文本框标签，在表单元素中，
<textarea>标签是用于定义多行文本输入的控件
代码实现~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反馈：
<textarea>请在此输入内容</textarea>
</form>
</body>
</html>
预览图~
更多推荐
HTML常用标签之表单标签
发布评论