web前端 --- 表单标签
表单标签 --- 行内标签
描述:一个完整的表单标签通常由表单域、表单控件(表单元素)和提示信息三部分构成
作用:数据交互(C/S)
(1)表单域 --- <form>
<form>
标签用于定义表单域,以实现用户信息的收集和传递,将范围内的表单元素提交给服务器
<form action="https://www.baidu.com" method="get"><!--get类型只能上传字符串-->
(2)表单元素
表单元素分为三类:input输入表单元素、select下拉表单元素、textarea文本域元素
【1】input输入表单元素
- 重要属性作用
<1> 文本框:(text)
用户名称:<input type="text" name="username">
<2> 密码框:(password)
<label for="mypass">用户密码:</label>
<input type="password" name="mypass" id="mypass">
<3> 单选按钮:(radio)
用户性别:
<input type="radio" value="男" name="gender">男
<input type="radio" value="女" name="gender">女
<!-- radio:单选按钮 -->
<!-- name:判断其是否为一组 -->
<4> 复选框:(checkbox)
用户爱好:
<input type="checkbox" name="hobby" id="" value="LOL">LOL<!--checkbox:多选框-->
<input type="checkbox" name="hobby" id="" value="rap">rap
<input type="checkbox" name="hobby" id="" value="jump">jump
<input type="checkbox" name="hobby" id="" value="basketball">basketball
<5> 提交按钮:(submit)
<input type="submit" value="注册">
<6> 重置按钮:(reset)
<input type="reset" value="重置">
<7> 邮箱:(email)
用户邮箱:
<input type="email" id="email" name="email">
<8> 文件域:(file)
用户头像:
<input type="file" name="avatar" id="avatar">
- 常用属性
属性值 | 描述 |
button | 定义可点击按钮 |
checkbox | 定义复选框 |
file | 定义输入字段和“浏览”按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的输入按钮 |
password | 定义密码字段。该字段中的字符显示被星号代替 |
radio | 定义单选按钮 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据 |
submit | 定义提交按钮。提交按钮将表单数据发送到服务器 |
text | 定义单行输入字段,在其中输入文本,默认宽度为20个字符 |
- 代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单标签</title>
</head>
<body><h1>用户注册</h1><form action="https://www.baidu.com" method="get"><!--get类型只能上传字符串--><!-- action属性:提交的urlmethod属性:表示http提交的方式,默认为getenctype属性:上传文件,或者涉及I/O流,就需修改enctype属性name属性:非常重要,name属性时表单中最重要的属性。服务器进行接收数据时,会通过name进行判断其是否为一组。--><p>用户名称:<input type="text" name="username"></p><p><label for="mypass">用户密码:</label> <input type="password" name="mypass" id="mypass"><!-- label:标记文本内容和表单标签的关系,本身无作用 type:属性。其内password默认看不见输入value:所有表单的值都是value,需键入的值可不写,进行选项的值用户无法填写,需手动定义。--></p><p>用户性别:<input type="radio" value="男" name="gender">男<input type="radio" value="女" name="gender">女<!-- radio:单选按钮 --></p><p>用户爱好:<input type="checkbox" name="hobby" id="" value="LOL">LOL<!--checkbox:多选框--><input type="checkbox" name="hobby" id="" value="rap">rap<input type="checkbox" name="hobby" id="" value="jump">jump<input type="checkbox" name="hobby" id="" value="basketball">basketball</p><p>用户邮箱:<input type="email" id="email" name="email"></p><p>用户博客:<input type="url" id="url" name="url"></p><p><input type="submit" value="注册"><!--submit:提交。reset:重置--><input type="reset" value="重置"></p></form></body>
</html>
【2】select下拉表单元素
页面中有多个选项需用户选择,并且为了保证格式规范和节约空间,用此标签控件定义下拉列表
- <select>中至少包含一对<option>
- 在<option>中定义selected时,当前项即为默认选中
用户地址:
<select name="address" id="address"><option>陕西</option><!-- H5标准下,value值默认为中间写入的值 --><option value="广东" selected>广东</option><!-- selected:默认选中 --><option value="福建">福建</option><option value="广西">广西</option>
</select>
【3】textarea文本域元素
用户输入内容较多,用表单元素标签代替文本框标签。表单元素标签<textarea>是用于定义多行文本输入控件
用户建议或意见:
<textarea name="" id="" cols="30" rows="10"></textarea><!-- 中间不能回车,中间默认为输入 -->
<!-- 文本域 -->
(3)代码演示
<!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>表单标签</title>
</head>
<body><h1>用户注册</h1><form action="https://www.baidu.com" method="post" enctype="multipart/form-data"><!--上传文件需将类型改为post--><p>用户名称:<input type="text" name="username" required> <!-- required:保证其不为空,默认值 -->用户名称:<input type="text" name="username" value="sss" readonly><!-- readonly:只读,无法修改value值 -->用户名称:<input type="text" name="username" value="ss1" disabled><!-- disabled:不可用,与readonly功能类似 -->用户名称:<input autofocus autocomplete="on" type="text" name="username" value="" placeholder="请输入用户名称"><!-- placeholder:提示语 --><!-- autofocus:光标聚焦,将光标确定在此位置。autocomplete:自动代码补齐功能,默认开启 --></p><p><label for="mypass">用户密码:</label> <input type="password" name="mypass" id="mypass"></p><p>用户性别:<input type="radio" value="男" name="gender">男<input type="radio" value="女" name="gender" checked>女<!-- radio:单选按钮 --><!-- checked:默认选中 --></p><p>用户爱好:<input type="checkbox" name="hobby" id="" value="LOL" checked>LOL<!--checkbox:多选框--><input type="checkbox" name="hobby" id="" value="rap">rap<input type="checkbox" name="hobby" id="" value="jump" checked>jump<input type="checkbox" name="hobby" id="" value="basketball">basketball</p><p>用户邮箱:<input type="email" id="email" name="email"></p><p>用户博客:<input type="url" id="url" name="url"></p><p>用户头像:<input type="file" name="avatar" id="avatar"><!-- get上传只能将文件的路径以及名字上传,不能上传图像,因为服务器无本地数据。 --><!-- 文件上传需上传I/O流 --></p><p>出生日期:<input type="datetime-local" name="" id=""> <!-- 年月日。有具体时分标注 --> <br><input type="date" name="" id=""> <!-- 仅年月日标注 --> <br><input type="time" name="" id=""> <!-- 仅时分标注 --></p><p><input type="color" name="" id=""> <!-- 选色器 -->用户年龄:<input type="number" name="" id=""><!-- 强制输入数字,语义化标签 --></p><p><!-- 提交表单 --><input type="submit" value="注册"><!--submit:提交。reset:重置--><button>提交</button><!--该按钮作用与submit相同,早期使用--><input type="image" src="" name="" id=""><!--该按钮是图片按钮。src为图片链接或路径--><input type="button" value="按钮" name="" id=""><!--该按钮不会提交数据--></p><input type="range" max="10" value="1"><!-- 范围,拖动框。value:可显示坐标 --><!-- 主要用在移动端 --><input type="hidden"><!-- 隐藏域,提交普通用户看不见的数据 --><input type="week"> <!-- 筛选周,与datetime相同 --><input type="search" name="" id=""><!-- 语义化标签 --><p>用户地址:<select name="address" id="address"><option>陕西</option><!-- H5标准下,value值默认为中间写入的值 --><option value="广东" selected>广东</option><!-- selected:默认选中 --><option value="福建">福建</option><option value="广西">广西</option></select></p><p>用户建议或意见:<textarea name="" id="" cols="30" rows="10"></textarea><!-- 中间不能回车,中间默认为输入 --><!-- 文本域 --></p></form></body>
</html>