制作一个单行文本框
创作时间:
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. 效果
热门推荐
践行劳动教育，赋能全面发展 盐城师范学院湿地学院将劳动课设为新春第一课
揭秘：黑桃Q背后的神秘含义与故事
2025年退休新规详解：养老金计发月数与个人账户全解析
夫妻之间的债务和借贷怎么处理
全面解析翡翠投资：风险、收益与技巧
基于露点间接蒸发冷却塔的数据中心冷却系统应用分析
六味地黄丸：古方新解与传统智慧的现代应用
从侦探小说透视侦查学：公大通识选修课受学生追捧
探寻梦境密码：从命盘角度解读蛇的出现
电脑音响选购与连接设置完全指南
一文读懂戛纳电影节！章子怡《酱园弄》贾樟柯《风流一代》入围！
怎样看懂免疫组化报告单
治疗手指麻木的奇穴——三叉穴
老派上海话vs新派上海话，侬讲个是上海啥地方个闲话？丨闵行情
新生儿健康标准全解析
睡觉时容易出汗，是身体「虚」吗？
选购洗衣机全攻略：7个关键维度助你挑选最适合的洗衣机
【元宇宙】以人为本的制造业的新前沿？
我胆小如鼠：余华写给人群中你我他的自传和情书
微信新功能“仅提醒朋友与我的互动”：让朋友圈体验更清静
餐饮连锁的四种管理模式：从汇总级到决策级的演变
电视待机耗电吗？看完这些数据，你可能会改变用电习惯
将现有的自定义DNS名称映射到Azure应用服务
AI技术突破，打造智慧健康管理系统
煮面条的小窍门与烹饪步骤
斗罗大陆史莱克学院：经典IP加持的MMO手游攻略
2b2t服务器，探索这个Minecraft无政府状态的未知领域？
什么是二类银行卡？功能、办理流程及注意事项全解析
推荐系统与搜索系统架构
历史上那么多汉家公主和亲，有没有胡人公主和亲中原王朝？