制作一个单行文本框
创作时间:
2025-01-22 07:08:27
作者:
@小白创作中心
制作一个单行文本框
表单控件是网页开发中非常基础和重要的内容，掌握它们的使用方法对于前端开发来说至关重要。本文将通过11个详细的案例，带你全面了解HTML+CSS表单控件的使用方法，包括单行文本框、密码输入框、单选按钮、复选框、普通按钮、提交按钮、重置按钮、文件上传框、Textarea控件和select控件等。每个案例都包含了详细的代码和效果展示，非常适合初学者学习和参考。
单行文本框 (text)
- 用途：允许用户输入单行文本。
- HTML 示例：
<input type="text" name="username"> - 特点：可以设置最大长度、只读等属性。
案例：制作一个单行文本框
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[type="text"] {
width: 300px;
height: 50px;
border: 1px solid #000;
border-radius: 5px;
padding: 10px;
font-size: 16px;
transition: all 0.3s ease;
background-color: #f5f5f5;
color: #333;
}
input[type="text"]:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
input[type="text"]:hover {
border-color: #007bff;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入内容">
</body>
</html>
2. 效果
未选中效果
选中效果
密码输入框 (password)
- 用途：用于安全地输入密码，输入的内容会以圆点或星号显示。
- HTML 示例：
<input type="password" name="userpass"> - 特点：与文本框类似，但隐藏了实际输入字符。
案例：制作密码输入框
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[type="password"] {
width: 300px;
height: 50px;
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
font-size: 16px;
transition: all 0.3s ease;
background-color: #f9f9f9;
color: #333;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 悬停效果 */
input[type="password"]:hover {
border-color: #007bff;
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}
/* 焦点状态样式 */
input[type="password"]:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 4px 10px rgba(200, 243, 9, 0.842);
}
/* 密码输入框的占位符文本颜色 */
::-webkit-input-placeholder {
color: #da2323;
}
</style>
</head>
<body>
<input type="password" placeholder="请输入密码" maxlength="6">
</body>
</html>
2. 效果
非选中状态
选中状态
状态
单选按钮 (radio)
- 用途：当一组选项中只能选择一个时使用。
- HTML 示例：
<input type="radio" name="gender" value="male"> Male - 特点：同名的一组单选按钮里只能选一个。
案例：制作单选按钮
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>
.myRadioStyle{
width: 30px;
height: 30px;
border-radius: 50%;
border: solid 2px #000;
background-color: #00ccff;
cursor: pointer;
}
.myRadioStyle:checked{
background-color: #ff0000;
}
</style>
</head>
<body>
<input class="myRadioStyle" type="radio" name="sex" id="man">男<br>
<br/>
<input class="myRadioStyle" type="radio" name="sex" id="woman">女<br>
</body>
</html>
2. 效果
复选框 (checkbox)
- 用途：当多个选项都可以被同时选择时使用。
- HTML 示例：
<input type="checkbox" name="interests" value="coding"> Coding - 特点：可以独立勾选，允许多个选择。
案例：制作一个复选框
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>
/* 复选框的基本样式 */
.myInputByCheckBoxStyle {
width: 20px;
height: 20px;
appearance: none;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #fff;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
}
/* 选中状态的样式 */
.myInputByCheckBoxStyle:checked {
background-color: #007bff;
border-color: #007bff;
}
/* 选中状态的勾选标记 */
.myInputByCheckBoxStyle:checked::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background-color: #fff;
}
/* 悬停效果 */
.myInputByCheckBoxStyle:hover {
border-color: #007bff;
}
/* 标签文本样式 */
label[for="checkbox"] {
margin-left: 5px;
font-size: 16px;
color: #333;
}
</style>
</head>
<body>
<label for="checkbox">
<input class="myInputByCheckBoxStyle" type="checkbox" name="checkbox" id="checkbox" value="是否已婚">
是否已婚
</label>
</body>
</html>
2. 效果
普通按钮 (button)
- 用途：执行JavaScript代码或其他客户端脚本。
- HTML 示例：
<button type="button" onclick="alert('Button clicked!')">Click me</button> - 特点：不提交表单，通常用来触发脚本事件。
案例：制作一个普通按钮
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>
.myButton{
width: 100px;
height: 50px;
background-color: #f35005;
border: none;
border-radius: 10px;
color: #fff;
font-size: 24px;
cursor: pointer;
}
.myButton:hover{
background-color: #15e215;
color: #00ccff;
}
</style>
</head>
<body>
<button class="myButton">点我</button>
</body>
</html>
2. 效果
鼠标悬浮
原始状态
提交按钮 (submit)
- 用途：将表单数据发送到服务器。
- HTML 示例：
<input type="submit" value="Submit form"> - 特点：点击后会触发表单的
onsubmit事件，并尝试提交表单数据。
案例：制作一个提交按钮
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>
.myButton{
width: 100px;
height: 50px;
background-color: #2ccdf5;
border: solid 5px #000;
border-radius: 10px;
color: #f70a0a;
font-size: 24px;
cursor: pointer;
}
.myButton:hover{
background-color: #0cfc04;
color: #000;
}
</style>
</head>
<body>
<button class="myButton" type="submit">提交</button>
</body>
</html>
2. 效果
鼠标悬浮
原始状态
重置按钮 (reset)
- 用途：将表单中的所有元素恢复到初始值。
- HTML 示例：
<input type="reset" value="Reset form"> - 特点：清除表单内填写的所有内容。
案例：制作一个重置按钮
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>
.myResetButton{
width: 100px;
height: 50px;
background-color: #ff1e00;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.myResetButton:hover{
background-color: #4f5557;
color: #00ccff;
}
</style>
</head>
<body>
<button class="myResetButton" type="reset">重置</button>
</body>
</html>
2. 效果
原始状态
鼠标悬浮状态
文件上传框 (file)
- 用途：允许用户从本地计算机选择一个或多个文件进行上传。
- HTML 示例：
<input type="file" name="attachment"> - 特点：可以选择文件，并且可以通过表单提交到服务器。
案例：制作一个文件上传框
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>
.myFileStyle{
width: 200px;
height: 50px;
background-color: #a4dbe9;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
}
.myFileStyle:hover{
background-color: #09e002;
}
</style>
</head>
<body>
<input type="file" class="myFileStyle"></input>
</body>
</html>
2. 效果
原始状态
鼠标悬浮状态
文件上传状态
Textarea 控件
- 用途：提供多行文本输入区域。
- HTML 示例：
<textarea name="message" rows="10" cols="30"></textarea> - 特点：可以设置行数和列数来控制大小，支持大量文本输入。
案例：制作一个Textarea控件
1. 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>制作一个Textarea框</title>
<style>
textarea{
width: 300px;
height: 300px;
background-color: #00ccff;
border: solid 5px #000;
border-radius: 10px;
padding: 10px;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
2. 效果图
select控件
- 用途：定义一个下拉列表。
- 属性：
name：指定 select 元素的名称，用于表单提交时识别。id：为 select 元素提供一个唯一的标识符。multiple：如果设置该属性，则允许用户选择多个选项（默认是单选）。size：当使用multiple属性时，可以设置可见选项的数量。required：标记这个字段为必填项。disabled：禁用下拉列表，使其不可选择。
案例：select的简单使用
1. 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select的简单使用</title>
</head>
<body>
<select name="car" id="carSelect">
<option value="volvo">Volvo牌</option>
<option value="saab">Saab牌</option>
<option value="mercedes">Mercedes牌</option>
<option value="audi">Audi牌</option>
</select>
<hr size="5" color="red"/>
<select name="cars" id="carSelect">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo牌</option>
<option value="saab">Saab牌</option>
</optgroup>
<!-- 分组 -->
<optgroup label="German Cars">
<option value="mercedes">Mercedes牌</option>
<option value="audi">Audi牌</option>
</optgroup>
</select>
</body>
</html>
2. 效果
热门推荐
肺动脉高压药物治疗全攻略：从基础到临床实践
《哪吒2》影视供应链深度解码：中国动画工业化革命样本
沙漠徒步饮水指南：如何科学合理地携带和利用水资源
如何测试题目难度的软件
阆中门神画：千年传承遇新潮，传统技艺焕新生
如何高效达成学习目标？这份学习计划制定攻略值得收藏
直播前如何检测网络安全
准亲家初次见面，做到“三不谈”，会被高看
抵押权与质押权在担保法中的区别详解
AGV智能无人搬运车如何实现自动化运作
50句遗憾诗词，句句治愈人心，字字戳中泪点
自驾游前，车辆检查了吗？
年夜饭是什么意思，年夜饭各种食物的寓意
危险源识别与风险评估如何实施？
服用罗红霉素期间的饮食禁忌
化橘红药食同源！看中大教授苏薇薇解读
上古神话中战力最强的十位神仙，蚩尤上榜，鸿钧老祖仅排第三位
战术灵活、战略定力：两者间的微妙舞动
优雅女性的穿衣法则：从气质到风格的全解析
解卦：舒解险难，出离困境，要靠理性智慧
这些动物便便真奇妙，能吃能喝能入药！
暴姓的起源与历史演变：暴姓文化及名人
蛊虫判刑：探究古代对蛊虫的认知与法律规定
滕王阁序之美，声声入耳 —— 一场跨越千年的朗读之旅
钢管脚手架搭建技巧和要点-每一步都关系到脚手架的安全
花茶花膳 宁心安神
智能家电让居家生活更高效舒适：如何通过科技提升家庭幸福感
走遍北京胡同：国子监，见证数百年文化传承
顶级跑车性能解析与驾驶体验评测
你对河南了解多少