制作一个单行文本框
创作时间:
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. 效果
热门推荐
湖北研发超高层建筑地震监测系统，成功预警1000公里外地震
创业者更换金色头像后获投资，九宫格理论解析头像风水
2025年换头像指南：从传统风水到AI生成的完整方案
微信头像暴露你的性格？心理学研究揭示6种头像背后的性格特征
智能化软件：计算机专业的未来趋势
人工智能引领计算机职场新趋势
信息技术引领计算机专业未来趋势
电解铝价格年内涨超12%！航空航天、新能源车等领域用铝需求大增
足银保健杯使用全攻略：从预热到清洁，这些细节你都知道吗？
中国移动5G全覆盖：从高原之巅到地下深处的通信奇迹
玩转杭州三天：从西湖到灵隐寺，冬季旅游全攻略
空调清洁神器大揭秘！
秋冬自驾打卡：四川理小路
稻城亚丁&四姑娘山：川西自驾游打卡胜地
灵山景区自驾游攻略：四川最美秘境
藏药一号：红景天等珍稀植物协同增效，提升免疫力延缓衰老
《出入平安》摘得微博电影之夜四项大奖，聚焦灾难中的人性光辉
狮子王——用动画再现荣耀（荣膺奥斯卡最佳影片）
吊瓜子走红：兼具营养与美味，成健康零食新宠
吊瓜子富含维E锌硒，护心养生效果佳
苏轼游庐山：一首诗揭示的观景与观世之道
从横看成岭到当局者迷：苏轼庐山题诗解读
《出入平安》上映4天票房1700万，国庆档竞争激烈被迫撤档
从选材到出锅：云南鸡汤制作全程详解
从流程到工具：项目管理降本增效全攻略
獬豸：汉代艺术中的正义守护神
铝价下跌的原因是什么？铝价波动对市场有何影响？
苏轼的中秋哲学：世事一场大梦
湖南临武通天玉走俏：质地细腻价比黄金，传承千年文化价值
湖南发布通天玉地方标准，五招教你辨别真伪