文章目录

表单元素
- input元素
- select元素
- textarea元素
- 按钮元素
- 表单状态(可替换元素不能完全控制)
- 配合表单元素的其他元素
- - label
  - datalist(存在兼容性问题，了解即可)
  - 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元素：输入框的类型

type：text，普通文本输入框
type：password，密码框
type:date，日期选择框，兼容性问题
type：search，搜索框，兼容性问题
type：number，数字输入框
type:checkbox，多选框
type：radio，单选框
type：file，选择文件

value属性：输入框的值；
placeholder属性：显示提示的文本，文本框没有内容时显示

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}

【Web前端HTML+CSS——表单知识点及相关案例】相关推荐

Web前端之登录表单
仿照书上的例子写的一.HTML <!DOCTYPE html> <html lang="en"> <head><meta charset ...
Web前端(15)_input表单
1.label标签点击用户名,直接跳到输入框里 <!DOCTYPE html> <html lang="en"> <head><meta ...
Web前端 | HTML | 表格 | 表单
目录--今日任务表格关卡2 表单关卡3 表格表格由 <table> 标签来定义: 每个表格均有若干行,由 <tr> 标签定义: 每行被分割为若干单元格,由 <td ...
web前端培训 - HTML 表单基础知识
1. 创建表单每个表单都以 form 开始标签开始,以 form 结束标签结束.两个标签之间是组成表单的说明标签.控件和按钮.每个控件都有一个 name 属性,用于在提交表单时对数据进行识别.for ...
Web前端HTML+CSS全套（1~20）
Web前端HTML+CSS全套(1~20) 拨云见日 CSS基础切图流程 PC企业站布局 PC游戏站布局溯本求源 HTML扩展 CSS扩展 HTMLS新语法 CSS3新语法兼容与hack 风生水 ...
定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
小白学Java Web 3 Web前端之CSS基本知识2
这一篇接着上一篇的内容来分享,上一篇还有大量的样式属性没有列出,不过在继续分享之前,我想先来分享一下关于网页的布局相关的一些东西,因为下一篇我打算分享用仅仅前面三小篇的内容来制作一个简单的静态网页, ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
【前端基础】表单标签/提交
[前端基础]表单标签/提交表单标签 1. 表单的介绍 2. 表单相关标签的使用 3. 小结表单提交 1. 表单属性设置 2. 表单元素属性设置 3. 示例代码小结表单标签学习目标能够知道表 ...

【Web前端HTML+CSS——表单知识点及相关案例】