制作如图所示表单
1.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
<style>
/* 去除浏览器设置的边框样式 */
input textarea {
outline: none;
}
/* 将textarea设置为不可缩放 */
textarea {
resize: none;
}
/* 设置表单宽度 */
fieldset {
width: 400px;
}
/* 设置聚焦样式 */
input:focus,textarea:focus {
border-color: #4791ff;
border-style: solid;
}
</style>
</head>
<body>
<form action="http://www.baidu.com" method="GET"> <!---action:请求URl, method:请求方式,默认为get,常用get和post-->
<!-- fieldset 将表单内容的一部分打包,生成一组相关表单的字段。legend为fieldset定义标题-->
<fieldset>
<legend>必填信息</legend>
<!-- name用于向服务器提交数据 ,所以要提交的内容都要使用name属性。id用于与label绑定 -->
<!-- 手机号输入框 -->
<div>
<label for="phone">手机:</label>
<input id="phone"
name="phone"
type="text"
maxlength="11"
placeholder="请输入您的手机号">
</div>
<!-- 密码输入框 -->
<!-- 文本如需以密文形式展示,可将type属性值设为password -->
<div>
<label for="pw">密码:</label>
<input type="password" id="pw" name="password" placeholder="请输入密码">
</div>
<!-- 验证码输入框 -->
<div>
<label for="validate">验证码:</label>
<input type="text" id="validate" name="validate">
<button>获取验证码</button>
<!-- <input type="button" value="获取验证码"> -->
</div>
</fieldset>
<fieldset>
<legend>选填信息</legend>
<!-- 照片选择 -->
<div>
<span>照片</span>
<input type="file">
</div>
<!-- 性别选择(单选框) -->
<!-- value用于区分选的内容 -->
<div>
<span>性别:</span>
<label for="male">男</label>
<input id="male" type="radio" name="sex" value="male" checked>
<label for="female">女</label>
<input id="female" type="radio" name="sex" value="female">
</div>
<!-- 爱好选择(复选框)-->
<div>
<span>爱好:</span>
<label for="sing">唱歌</label>
<input type="checkbox" name="hobbies" id="sing" value="sing">
<label for="dance">跳舞</label>
<input type="checkbox" name="hobbies" id="dance" value="dance">
<label for="soccer">足球</label>
<input type="checkbox" name="hobbies" id="soccer" value="soccer">
<label for="basketball">篮球</label>
<input type="checkbox" name="hobbies" id="basketball" value="basketball">
</div>
<!-- 学历 -->
<span>学历:</span>
<select name="education">
<option value="0">小学</option>
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3">大专</option>
<option value="4">本科</option>
</select>
<!-- 简介 -->
<div>
<span>简介:</span>
<textarea name="intro" cols="20" rows="5"></textarea><!--cols:列数,rows:行数-->
</div>
</fieldset>
<!-- 重置按钮 (起作用的前提:1.type必须是reset类型,value可不写2.所有的内容都必须在同一个表单中(form)-->
<input type="reset">
<!-- <button>重置</button> -->
<!-- 提交按钮 -->
<input type="submit">
</form>
</body>
</html>
CSS属性总结
-
type:input的类型
- text:文本输入框(明文输入)
- password:文本输入框(密文输入)
- radio:单选框
- checkbox:复选框
- button:按钮
- reset:重置
- submit:提交表单数据给服务器
- file:文件上传
-
maxlength:允许输入的最大字数
-
placeholder:占位文字
-
readonly:只读属性
-
disabled:禁用
-
checked:默认被选中(只有当type为radio或checkbox是可用)
-
autofocus:当页面加载时,自动聚焦
-
name:名字
- 在提交数据给服务器时,可用于区分数据类型
- 在单/复选框起到互斥的作用
-
value:取值
-
form:设置所属的form元素(填写form元素的id,一旦使用了此属性,input元素即使不写在form元素内部,它的数据也能够提交给服务器)
-
action:用于提交表单数据的请求URL
-
method:请求方法(get和post),默认是get
1.get:在请求URL后面以?的形式跟上发给服务器的参数,多个参数之间用&隔开,比如
http://ww.test.com/login?phone=123&password=234&sex=1
由于浏览器和服务器对URL长度有限制,因此在URL后面附带的参数是有限制的,通常不能超过1KB
2.post:发送给服务器的参数全部放在请求体中
理论上,post传递的数据量没有限制(具体还得看服务器的处理能力)
-
target:在什么地方打开URL(参考a元素的target)
-
enctype
规定了在向服务器发送表单数据之前如何对数据进行编码
常用的两种取值:
1.application/x-www-form-urlencode:默认的编码方式
2.multipart/form-data :文件上传是必须为这个值,并且method必须是post
-
-
textarea缩放的CSS设置
- 禁止缩放:resize:none;
- 水平缩放:resize:horizontal;
- 垂直缩放:resize:vertical;
- 水平垂直缩放:resize:both;(默认状态)
-
select常用属性:
- multiple:可以多选
- size:显示多少项
-
option常用属性:
- selected:默认被选中