HTML标签之表单域，input表单，label标签，下拉表单，textarea文本域标签
表单域
在HTML中，表单域用于收集用户输入的数据。以下是一些常见的HTML表单域元素：
<input>：用于接收用户输入的各种类型的数据，如文本、密码、数字等。
<textarea>：用于多行文本输入。
<select>：用于创建下拉菜单，用户可以从预定义的选项中选择一个。
<button>：用于创建按钮，用户可以点击执行特定的操作。
<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>表单域（了解）</title>
</head>
<body>
<!--
<form action="url地址" method="提交方式" name="表单域名称"
-->
<form action="demo.php" method="post" name="name1">
</form>
<!--
1.在我们写表单元素之前，应该有个表单域把他们进行包含
2.表单域时form标签
-->
</body>
</html>
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>input表单元素</title>
</head>
<body>
<form action="xxx.php" method="get">
<!--
text 文本框 用户可以在里面输入任何文字
password 密码框 用户看不见输入的密码
maxlength 正整数 规定输入字段中的字符的最大长度
-->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
密码：<input type="password" name="psw"> <br>
<!--
radio 单选按钮 可以实现多选一
name 是表单元素的名字 这里性别单选按钮必须有相同的名字name 才可以实现多选一
checkbox 复选框 可以实现多选
单选框和复选框可以设置 checked 属性，当页面打开的时候就可以默认选中这个按钮
-->
性别：男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> <br>
爱好：吃饭 <input type="checkbox" name="hobby" value="吃饭" checked="checked"> 睡觉 <input type="checkbox" name="hobby" value="睡觉"> 打豆豆<input type="checkbox" name="hobby" value="打豆豆"><br>
<!--
1.name和value是每个表单元素都要有的属性值，主要给后台人员使用
2.name表单元素的名字，要求单选按钮和复选按钮要有相同的name值
-->
<!--
点击了提交按钮，可以把表单域 form 里面的表单元素里面的值提交给后台服务器
-->
<input type="submit" value="免费注册">
<!--
重置按钮可以还原表单元素初始的默认状态
-->
<input type="reset" value="重置"> <br>
<!-- 普通按钮 button 后期结合 js 搭配使用-->
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像：<input type="file"> <br>
</form>
</body>
</html>
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>label标签</title>
</head>
<body>
<label for="text"> 用户名：</label><input type="text" id="text"><br>
<input type="radio" id="nan" name="sex"><label for="nan">男</label>
<input type="radio" id="nv" name="sex"><label for="nv">女</label>
</body>
</html>
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>select下拉表单元素</title>
</head>
<body>
籍贯：
<select>
<option>山东</option>
<option>北京</option>
<option>长沙</option>
<option selected=“selected”>重庆</option>
<option>浙江</option>
</select>
<!--
1.<select> 中至少包含一对 <option>
2.在 <option> 中定义 selected=“selected” 时，当前项即为默认选中项
-->
</body>
</html>
textarea文本域标签
<!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>textarea文本域标签</title>
</head>
<body>
<form>
今日反馈：
<textarea cols="50" rows="7">请写出你的留言反馈</textarea>
</form>
</body>
</html>
最后提供一个手电筒查看图片页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态手电筒</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: url(https://pic2.zhimg.com/v2-4d0f3e43e75bb67646215e259fc2e9ad_r.jpg) no-repeat;
background-size: cover;
background-position: center;
}
canvas {
position: fixed;
left: 0;
top: 0;
z-index: 999;
pointer-events: none;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const position = {
x: 0,
y: 0,
r: 50
}
function render() {
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
ctx.beginPath();
ctx.clearRect(0, 0, canvas.width, canvas.height)
var radial = ctx.createRadialGradient(position.x, position.y, position.r, position.x, position.y, position.r * 3)
radial.addColorStop(0, 'rgba(255,255,255,0)');
radial.addColorStop(1, 'rgba(0,0,0,0.9)');
ctx.fillStyle = radial;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function init() {
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
ctx.beginPath();
ctx.clearRect(0, 0, canvas.width, canvas.height)
var radial = ctx.createRadialGradient(position.x, position.y, position.r, position.x, position.y, position.r * 3)
radial.addColorStop(1, 'rgba(0,0,0,0.9)');
ctx.fillStyle = radial;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
document.onmousemove = e => {
position.x = e.clientX;
position.y = e.clientY;
render();
}
window.onload = function () {
init()
}
</script>
</body>
</html>
云下文字雨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Rain Animation</title>
<link rel="stylesheet" href="./css/stylecloud.css">
</head>
<body>
<div class="container">
<div class="cloud">
<!-- <div class="text">暴富</div>
<div class="text">￥￥</div> -->
<!-- <div class="text">c</div> -->
<!-- 雨滴将会在这里出现 -->
</div>
</div>
<script src="./js/cloudmain.js"></script>
</body>
</html>
js代码
// 生成字母和数字数组
function generateText() {
const letters = [];
const numbers = [];
const a = "a".charCodeAt(0);
for (let i = 0; i < 26; i++) {
// letters.push(String.fromCharCode(a + i));
letters.push("我想要");
if (i < 9) {
// numbers.push(i + 1);
numbers.push("暴富！！！");
}
};
return [...letters, ...numbers];
};
// 从生成的数组中随机取出一个字符
function randomText() {
const texts = generateText();
const text = texts[Math.floor(Math.random() * texts.length)];
return text;
};
function rainEffect() {
const cloudEle = document.querySelector(".cloud");
const textEle = document.createElement("div");
textEle.innerText = randomText();
textEle.classList.add("text");
const left = Math.floor(Math.random() * 310);
const size = Math.random() * 1.5;
const duration = Math.random();
const styleSheets = {
left: `${left}px`,
fontSize: `${0.5 + size}em`,
animationDuration: `${1 + duration}s`,
};
Object.assign(textEle.style, styleSheets);
cloudEle.appendChild(textEle);
setTimeout(() => {
cloudEle.removeChild(textEle);
}, 2000);
};
// 每隔20ms创建一个雨滴元素 在这更改创建文字的产生数
setInterval(() => rainEffect(), 100);
css代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--body-color: #181c1f;
/* --body-color:gold */;
--primary-color: #ffffff;
/* --primary-color:#58f2ff */;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: var(--body-color);
}
.container {
width: 100%;
height: 400px;
display: flex;
justify-content: center;
border-bottom: 1px solid rgba(255, 255, 255, .1);
/* 添加一个从下往上线性渐变的镜像效果，增加视觉层次感 */
-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, transparent, transparent, #0005);
}
.cloud {
position: relative;
top: 50px;
z-index: 100;
/* 横向云朵 */
width: 320px;
height: 100px;
background-color: var(--primary-color);
border-radius: 100px;
/* drop-shadow函数将阴影效果应用于投影图像 */
filter: drop-shadow(0 0 30px var(--primary-color));
}
.cloud::before {
content: "";
/* 左侧小云朵 */
width: 110px;
height: 110px;
background-color: var(--primary-color);
border-radius: 50%;
position: absolute;
top: -50px;
left: 40px;
/* 右侧大云朵 */
box-shadow: 90px 0 0 30px var(--primary-color);
}
.cloud .text {
position: absolute;
top: 40px;
height: 20px;
line-height: 20px;
text-transform: uppercase;
color: var(--primary-color);
/* 为文字添加阴影，看上去发光，增加视觉效果 */
/* text-shadow: 0 0 5px var(--primary-color), 0 0 15px var(--primary-color), 0 0 30px var(--primary-color) ;*/
text-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 15px var(--primary-color)
transform-origin: bottom;
animation: animate 2s linear forwards;
}
@keyframes animate {
0% {
transform: translateX(0);
}
70% {
transform: translateY(290px);
}
100% {
transform: translateY(290px);
}
}
注意上述的两个案例是建立在Css和js都学了的基础上构建的。
上一篇： 0基础看这一篇就够了
下一篇： PHP - Lara