文章目录
表单元素input元素select元素textarea元素按钮元素表单状态(可替换元素不能完全控制)配合表单元素的其他元素labeldatalist(存在兼容性问题，了解即可)form元素fieldset元素 表单元素代码练习：表单元素代码练习1——input元素表单元素代码练习2——button datalist fieldset表单元素代码练习3——datalist表单元素代码练习4——fieldset表单元素代码练习5——select元素表单元素代码练习6——label元素 美化表单元素新的伪类常见用法美化表单练习代码1：美化表单练习代码2：美化表单练习代码3：（CSS代码没包含）美化表单练习代码4：美化表单练习代码5：美化表单练习代码6：进阶表单——完整案例(登录页面)表单元素
一系列元素，主要用于收集用户数据
input元素
输入框
type元素：输入框的类型
value属性：输入框的值；placeholder属性：显示提示的文本，文本框没有内容时显示type：text，普通文本输入框
type：password，密码框
type:date，日期选择框，兼容性问题
type：search，搜索框，兼容性问题
type：number，数字输入框
type:checkbox，多选框
type：radio，单选框
type：file，选择文件
input元素可以制作按钮
type取值为：submit button reset
select元素
下拉列表选择框
通常和option配合使用
textarea元素
文本域，多行文本框(例如：简介)
按钮元素
button
type属性：reset,submit,button,默认值:submit
表单状态(可替换元素不能完全控制)
readonly属性：布偶属性，是否只读，不会改变表单显示样式、
disabled属性：布偶属性，是否禁用，会改变表单样式
配合表单元素的其他元素
label
普通元素，通常配合单选和多选框使用
显示关联
可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值隐式关联
label套在最外层
datalist(存在兼容性问题，了解即可)
通常与普通文本框连用，例如搜索时弹出来的框框，默认情况不显示，其他情况都可以进行修改，注意与搜索框不同，不能混淆，这个属性很少用，他有局限性。
form元素
通常情况下，会将整个表单元素，放置form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。
form元素对于开发静态页面，意义不大，后期学服务器配合
fieldset元素
表单分组
表单元素代码练习：
表单元素代码练习1——input元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- 输入框 --><p><input type="text" placeholder="请输入账号"></p><!-- 密码框 --><p><input type="password" placeholder="请输入密码"></p><!-- 日期选择框 --><p><input type="date" name="" id=""></p><!-- 搜索框 --><p><input type="search" name="" id=""></p><!-- 滑块 --><p><input type="range" min="0" max="5"></p><!-- 颜色选择框 --><p><input type="color"></p><!-- 数字输入框 --><p><input type="number" min="0" max="10" step="2"></p><!-- 多选框 --><p>爱好：<input name="loves" type="checkbox">舞蹈<input name="loves" type="checkbox">音乐<input name="loves" type="checkbox">画画<input name="loves" type="checkbox">书法</p><!-- 单选框 --><p> 性别：<input name="gender" type="radio">男<input name="gender" type="radio">女</p><!-- 选择文件 --><p><input type="file"></p><!-- 按钮 --><p><input type="reset"></p><p><input type="button"></p><p><input type="submit"></p></body></html>
表单元素代码练习2——button datalist fieldset
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p><button type="button">这是一个按钮</button></p></body></html>
表单元素代码练习3——datalist
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body>请输入你想搜索的浏览器<p><input list="userAgrent" type="text"></p><datalist id="userAgrent"><option value="Chrome">谷歌浏览器</option><option value="IE">IE浏览器</option><option value="Operate">欧鹏浏览器</option><option value="Apple">苹果浏览器</option><option value="Fire">搜狐浏览器</option></datalist> </body></html>
表单元素代码练习4——fieldset
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div><h1>修改用户信息：</h1><fieldset><legend>账号密码</legend><p>用户账号：<input type="text"></p><p>用户密码：<input type="password"></p><p>用户姓名：<input type="text"></p></fieldset><p>用户账号：<input type="text"></p><p>用户密码：<input type="password"></p><p>用户姓名：<input type="text"></p><p>用户城市：<select name="" id=""><option value="">成都</option><option value="">重庆</option><option value="">江西</option><option value="">厦门</option><option value="">云南</option><option value="">北京</option><option value="">天津</option><option value="">上海</option></select></p><p><button>提交修改</button></p></div></body></html>
表单元素代码练习5——select元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p><select name="" id=""><option>成都</option><option>北京</option><option>云南</option><option>重庆</option><option>长沙</option><option>三亚</option><option>广西</option></select></p><p>请选择你最想下载的软件<select name="" id=""><optgroup label="游戏"><option>英雄联盟</option><option>魔兽世界</option><option>和平精英</option><option>王者荣耀</option></optgroup><optgroup label="娱乐"><option>QQ</option><option>微信</option><option>小红书</option><option>Facebook</option><option>抖音</option></optgroup></select></p><p>请选择你想要下载的软件：<select multiple><optgroup label="游戏"><option>英雄联盟</option><option>魔兽世界</option><option>和平精英</option><option>王者荣耀</option></optgroup><optgroup label="娱乐"><option>QQ</option><option>微信</option><option>小红书</option><option>Facebook</option><option>抖音</option></optgroup></select></p></body></html>
表单元素代码练习6——label元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p>请选择性别<input id="radMale" name="gender" type="radio"><label for="radMale">男</label><input id="radWomale" name="gender" type="radio"><label for="radWomale">女</label></p></body></html>
美化表单元素
新的伪类
focus元素聚焦时的样式
tabindex 和 z-index 都可以应用数字来表示顺序
需要统一样式，就应该覆盖浏览器的默认样式
checked
单选和多选框都是可替换元素，一些样式不可以控制
单选和多选被选中的样式
text-align不是文本居中，而是行盒和行块盒居中
常见用法
重置表单元素的样式
设置多行文本框textarea是否允许调整尺寸
resize属性：
both：默认值，两个方向都可以调整尺寸none：不能调整尺寸horizoncal:水平方向可以调整尺寸vertical：垂直方向可以调整尺寸 文本框边缘到内容的距离
控制单选和多选的样式两种方式：
用padding左右都可以设置；用text-indent只可以设置首行缩进
美化表单练习代码1：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><a tabindex="3" href="">Lorem.</a><p><input tabindex="2" type="text"></p><button tabindex="1" type="button">提交</button></html>
美化表单练习代码2：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input:checked+label{background-color:darksalmon;}</style></head><body><p><input id="radMale" name="gender" type="radio"><label for="radMale">男</label><input id="radWomale" name="gender" type="radio"><label for="radWomale">女</label></p></body></html>
美化表单练习代码3：（CSS代码没包含）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/myform.css"></head><body><select name="" id=""><option value="">lorem</option><option value="">ipsum.</option><option value="">lorem</option><option value="">hjav</option><option value="">dnwkd</option><option value="">lekwd</option><option value="">ljwd</option><option value="">lodwdm</option><option value="">hjhdda</option></select><p><input type="text"></p><p><button type="button">提交</button></p><p><textarea name="" id="" cols="30" rows="10"></textarea></p></body></html>
美化表单练习代码4：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input,textarea{text-indent: 1em;}</style></head><body><input type="text"><textarea name="" id="" cols="30" rows="10"></textarea></body></html>
美化表单练习代码5：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>漂亮的单选框</title><style>.radio{position: relative;/* background-color: #fff; */outline: 2px solid #000;width: 20px;height: 20px;border-radius: 50%;cursor: pointer;}.radio.checked{background: #fff;}.radio.checked::after{display: block;background: #008c8c;position: absolute;content:"" ;width: 8px;height: 8px;outline: solid 1px #000;margin-top: 6px;margin-left: 6px;border-radius: 50%;}</style></head><body><div class="radio checked"></div></body></html>
美化表单练习代码6：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=p, initial-scale=1.0"><title>Document</title><style>.radio-item .radio{display: inline-block;background-color: #fff;border: solid 1px;width: 20px;height: 20px;border-radius: 50%;cursor: pointer;}.radio-item input:checked+.radio::after{display: inline-block;background: #008c8c;position: absolute;content:"" ;width: 8px;height: 8px;outline: solid 1px #000;margin-top: 6px;margin-left: 6px;border-radius: 50%;}</style></head><body><p>请选择性别：<label class="radio-item"><input name="gender" type="radio"><span class="radio"></span><span>男</span></label><label class="radio-item"><input name="gender" type="radio"><span class="radio"></span><span>女</span></label></p></body></html>
进阶表单——完整案例(登录页面)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css"></head><body><form class="contain"><h1>用户注册</h1><div class="form-item"><input class="txt" type="text" placeholder="请输入账号" maxlength="11"></div><div class="clearfix form-item"><input class="txt left captcha" type="text" placeholder="请输入验证码"><button class="right specific" type="button">发送验证码</button></div><div class="form-item"><input class="txt" type="password" placeholder="请输入密码"></div><div class="form-item"><input class="txt" type="password" placeholder="请再次输入密码"></div><div class="form-item"><select class="txt" multiple><option value="">爱好1</option><option value="">爱好2</option><option value="">爱好3</option><option value="">爱好4</option><option value="">爱好5</option><option value="">爱好6</option><option value="">爱好7</option><option value="">爱好8</option><option value="">爱好9</option><option value="">爱好10</option></select></div><div class="clearfix form-item"><div class="title left">性别</div><div class="left"><label><input type="radio" name="gender"><span>男</span></label><label><input type="radio" name="gender"><span>女</span></label></div></div><div class="form-item"><textarea class="txt" cols="30" rows="10" placeholder="请输入个人简历"></textarea></div><div class="form-item"><label><input type="checkbox" checked><span class="policy">同意本平台的一切相关策略</span></label> </div><div class="form-item"><button disabled type="submit"><a href="../新空间/pageMaking.html">立即注册</a></button><button type="reset">重置表单</button></div></form></body></html>
*{padding: 0;margin: 0;box-sizing: border-box;}html{background: #081620;}.contain{background: #fff;width: 400px;margin: 0 auto;margin-top: 30px;padding: 20px;border-radius: 15px;}.contain h1{/* outline: 1px solid #000; */text-align: center;margin-bottom: 20px;}.form-item{margin-bottom: 10px;}.txt{outline: none;border: 1px solid #ccc;width: 100%;font-size: 14px;padding: 0 10px;border-radius: 10px;height: 40px;}.txt:focus{border-color: #5f8be8;}/* 单独处理文本框的样式 */select.txt{height: 100px;padding: 10px;}textarea.txt{resize: none;height: 100px;padding: 10px;}/* 按钮的统一样式 */button{width: 100px;height: 40px;background: #5f8be8;font-size: 14px;border: none;outline: none;border-radius: 5px;cursor: pointer;color: #000;}/* 按钮点击的样式 */button:hover{background: #2864e6;}/* 禁止按钮的样式 *//* button:disabled{background: #a8bdeb;cursor: not-allowed;} */.left{float:left;}.right{float: right;}/* 清除浮动 */.clearfix::after{content: ;display: block;clear: both;}/* 特殊情况的处理 */.captcha{width: 210px;}.specific{margin-right: 20px;}.title{margin-right: 8px;}.policy{font-size: 12px;}.policy span{vertical-align: 2px;}/* 单选框和多选框的选中状态 */label{color: rgb(82, 80, 80);}label span{cursor: pointer;}label input:checked~span{color: rgb(20, 19, 19);}.txt::placeholder{color: rgb(92, 88, 88);}.txt:focus::placeholder{color:#333}
