表单：表单是搜集用户数据信息的各种表单元素的集合区域
作用：用于收取用户数据并向后台发送，前后交互的方式之一
应用：表单常应用于 登录注册，搜索，文件上传等
caption :表单提交的地址;
method :提交方式GET/POST（默认get）;
enty :设置编码格式 有三种.
默认：application/x-www-form-urlencoded
上传文件：multipart/form-data
不建议使用：text/plain
类型
input : 表单中使用频率最高的标签;
textarea: 文本域,一般用于多行文本;
slect : 下拉框,一般用于选项;
input
text :文本框
password :密码框
radio :单选框
checkbox :复选框
file :文件选择
hidden :隐藏域
submit :提交按钮
reset :重置按钮
placeholder:占位,提高用户体验.（用于提示用户输入什么）
name :名字,表单重要属性;
readonly :只读;
disabled :禁用;
value :表单的值;
select
option :下拉选项标签;
size :下拉框显示数量;
selected:选中某个;
name :提交数据时显示的名字;
表单常用标签
fieldset :表单设置分组
legend :设置分组表单的标题
label :提高用户体验度
input示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="" method="GET" enctype="multipart/form-data">
<fieldset style="width:450px">
<legend>登陆界面</legend>
<p>用户名：<input type="text" name="user" placeholder="请输入用户名" size="25"></p>
<p>密 码：<input type="password" name="psd" placeholder="请输入密码" size="26"></p>
<p><input type="submit" name="tijiao" value="登陆" style="margin-left:80px"> 
<input type="reset" name="chongzhi" value="清空"></p>
</fieldset>
</form>
</body>
</html>
效果截图
image.png
其它示例
<form action="" method="GET" enctype="multipart/form-data">
<fieldset style="width:450px">
<legend>选择框框</legend>
<p>日期选择： <input type="date" name="birth"></p>
<p>单选： 
<label for="man">男：<input type="radio" name="sex" value="man" id="man"></label>
<label for="woman">女：<input type="radio" name="sex" value="woman" id="woman"></label> <!-- for绑定id,实现点击文字选择-->
</p>
<p>多选: 
<label for="play">玩耍<input type="checkbox" name="like" value="play" id="play"></label> 
<label for="music">音乐<input type="checkbox" name="like" value="music" id="music"></label> 
<label for="sleep">睡觉<input type="checkbox" name="like" value="sleep" id="sleep"></label> 
</p><br>
<p>下拉框： 
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected >3</option> <!-- 默认选择的 -->
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p>隐藏的：
<input type="hidden" name="moren" value="100">
</p>
<p>文件选择： <input type="file" name="file"> </p>
<p>文本框：<br>
<textarea placeholder="这里是个性签名" rows="5" cols="25" style="resize: none"></textarea>
</p>
<!-- rows 文本框行数
cols 文本框列数 计数为给定的数量+1
resize:文本框可否手动拉伸 none为不可拉伸-->
</fieldset>
</form>
效果截图
image.png
网友评论