三、表单标签<form>

表单标签<form>
# 作用:表单用于向服务器传输数据
# 表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等
# 表单还可以包含textareaselectfieldsetlabel元素
# 属性:
# action 提交地址
# method 提交方式get/post,默认get
# get: 提交的键值对放在地址栏中url后面;安全性较差;对提交内容的长度有限制
# post:提交的键值对不在地址栏;安全性高;对提交的内容长度基本无限制
#
# <input>标签
# 属性:
# type值:
# radio单选框
# checkbox多选框
# text文本
# password密文
# file提交文件。form表单需要加上属性enctype="multipart/form-data"
# submit 提交给server端()value:此处的value为提交的单词
# button 提交(不会发送给servervalue:此处的value为提交的单词
# reset 清空/重置
# placeholder 在文本框中显示内容
# name (给输入框这个键起名)表单提交的键。name属性是和服务器通信时使用的名称
# value 表单提交的值
# checked 默认选中
# disabled 禁用功能
#
# <select>标签
# 属性:
# name表单提交的键
# size选项个数
# multiple:multiple(默认显示所有)
#
# <option></option> <!--下拉选项中的每一项-->
# 属性:
# value:表单提交的值
# selected:selected <!--下拉选项默认选中-->
# <textarea name="名字" rows="高度" cols="宽度"></textarea> <!--多行文本框-->

# 例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册页面</h1>
<form action="提交地址" method="post" enctype="multipart/form-data">
<p>姓名<label>
<input type="text" placeholder="姓名">
</label></p>
<p>密码<label>
<input type="password" placeholder="密码">
</label></p>
<p>性别:
男<label>
<input type="radio" name="gender" value="men">
</label>
女<label>
<input type="radio" name="gender" value="women">
</label>
</p>
<p>爱好:
旅游<label>
<input type="checkbox" name="hobby" value="travel">
</label>
运动<label>
<input type="checkbox" name="hobby" value="sports">
</label>
音乐<label>
<input type="checkbox" name="hobby" value="music">
</label>
电影<label>
<input type="checkbox" name="hobby" value="movie">
</label>
</p>
省份<label>
<select name="">
<option>甘肃</option>
<option>四川</option>
<option>江苏</option>
<option>湖南</option>
<option>浙江</option>
</select>
</label>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
详情<label>
<textarea name="" rows="20px" cols="30px"></textarea>
</label>
<!-- 提交文件-->
<p>
<input type="file" name="">
</p>
<!-- 重置-->
<p><input type="reset"></p>
<!-- 提交-->
<p><input type="submit"></p>
</form>
</body>
</html>
posted @ 2021-05-19 18:30  ShadowFolk  阅读(139)  评论(0编辑  收藏  举报