制作如图所示表单
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：默认被选中
6529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
