表单标签(用于收集用户信息)
一,表单的组成
由有一个完整的表单域,表单控件(表单元素)和提示信息
二,表单域
<form>标签用于定义表单域 ,实现用户信息收集和传递(会把范围内的单元格提交给服务器)
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
1.action url地址 用于指定接收并处理表单数据的服务器程序的url地址
2.method get/post 用于设置表格数据的提交方式,其取值为get或post
3.name 名称 用于指定表单的名称,以区分同一个页面的多个表单域
三,表单元素(控件)
(一)input
1.input输入表单元素(用于收集用户信息)
a.<input />是单标签
b.<input>标签中,包含type属性
c.根据不同的type属性值,可以输入字段有多种形式(文本,字段,复制框,掩码后的文本控件,单选选项,按钮等)
<input type="属性值" />
d.<input />表单元素
button 定义可点击按钮(多数情况下,要通过javascript启动脚本)
checkbox 定义复选框
file 定义输入字段和“浏览”按钮,供文件上传
hidden 定义隐藏输入字段
password 定义密码(安全)
radio 定义单选按钮
image 定义图片
reset 定义重置按钮。重置按钮会清除表单的所有数据
submit 定义提交按钮会把表单数据发送到服务器。
text 定义单行输入字段,用户可以在其中输入文本,默认宽度为20个字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<!-- text 文本框 用户可以在里面输入任何文字 -->
用户名:<input type="text"> <br>
<!-- password 密码框 无法看到密码 -->
密码:<input type="password"><br>
<!-- radio 单选框 注意需要参与单选的要有相同的name属性 -->
<!-- 单选按钮和复选框可以设置checked,页面打开时默认选中这个,单写也可以 -->
性别:<input type="radio" name="性别:">男 <input type="radio" name="性别:">女<br>
<!-- checkbox 多选框 实现多选 -->
爱好:<input type="checkbox" name="爱好">唱歌 <input type="checkbox" name="爱好">跳舞 <input type="checkbox" name="爱好">rap <input type="checkbox" name="爱好">篮球<br>
</form>
</body>
</html>
2.除了type,<input>标签还有其他属性:
name 由用户自定义(后台查看) 定义input元素名称
value 由用户自定义(后台查看) 规定input元素的值
checked checked 规定此input元素首次加载应当被选中(默认)
maxlength 正整数 规定输入字符中的最大字符长度
3.label标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>label标签 </title>
</head>
<body>
<label for="User">用户名:</label><input type="text" maxlength="8" id="User"><br>
我是:<input type="radio" name="sex" id="man" checked> <label for="man">男</label>
<input type="radio" name="sex" id="weman"> <label for="weman">女</label>
</body>
</html>
用于辅助选择
(二)select(下拉列表)
1.页面空间中使用可以节约页面空间
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
</select>
注意:
1.<select>中至少需要包含一对<option>
2.在<option>中定义selected="selected",默认选项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select 标签</title>
</head>
<body>
<form>
籍贯:
<select>
<option>美国</option>
<option selected>中国</option>
<option>日本</option>
<option>韩国</option>
<option>法国</option>
<option>英国</option>
</select>
</form>
</body>
</html>
(三)textarea(文本域元素)
输入内容较多的情况下,使用<textarea>标签,常见与留言板、评论
语法:
<textarea row="3" cols="20">
文本内容
</textarea>
cols表示一行多少字符,rows表示几行。实际使用过程使用CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>textarea 标签</title>
</head>
<body>
<form>
今日反馈:
<!-- cols表示一行多少字符,rows表示几行。实际使用过程使用CSS -->
<textarea cols="10" rows="5">
我爱哟西,我爱劲爽冰红茶。
</textarea>
</form>
</body>
</html>