制作一个单行文本框
创作时间:
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. 效果
热门推荐
拥挤的影视+AI赛道，为何是AI短剧率先跑出圈？
诱导“自噬性铁死亡”，天津大学合作发文：发现肝癌治疗新靶点
哈贝马斯：主体间的交往理性——人类所进行的大部分交往是扭曲性的“伪交往”
首批“土豆米”上市！你吃过吗？
全国第一条土豆米生产线在昭通巧家正式投产运行！马铃薯里的新质生产力
甲醛挥发温度与浓度控制全攻略
马兰头种植指南：最佳种植时间和方法详解
一块止震板而已，能有多大作用？
银行的理财产品投资收益与投资组合多元化程度的关系？
【造纸术】造纸术是哪个朝代发明的 造纸术的意义与影响
每天补充20mg锌，是养生还是隐患？
男生最吃香的十大专业排名（2025年高考参考）
跨境电商独立站运营指南：如何有效降低退货率？
甘油三酯高有多大危害?哪些人需要吃药？给您最佳治疗方案
当天往返！重庆坐高铁最快30分钟直达！这些城市景美又好玩
佛教中的本命佛概念及其来源分析 本命佛的意义与信仰背景
I²C协议详解：从硬件框架到信号传输
嵌入式之常用通信协议-I²C
《消逝的光芒2》终极版DLC"猩红纽带"全攻略
十大最强岩石系宝可梦排行榜
糖尿病管理新突破：低碳水化合物饮食对长期健康的影响
谐波如何测试?谐波测试两种主要方式分析
猴疱疹病毒致命率達80% 遇到猴子點算好？被抓傷如何急救自保？
增托位、减负担、保安全，山东2~3岁幼儿入园将“应招尽招”
HR进阶必备！国内6大人力资源核心期刊深度解析，助你掌握行业风向标
炉石传说多系萨如何构筑 炉石传说多系萨构筑参考指南
真正厉害的人，抽象思维都很强大
拔牙后如何帮助伤口愈合？拔牙后饮食指南/注意事项奉上详解
宝宝尿量多少正常，宝宝尿黄怎么应对呢
娃娃菜的田间管理和种植技巧