HTML+CSS表单控件（11个案例+代码+效果图）

目录

单行文本框 (text)

案例:制作一个单行文本框

1.代码

2.效果

密码输入框 (password)

案例:制作密码输入框

1.代码

2.效果

单选按钮 (radio)

案例:制作单选按钮

1.代码

2.效果

复选框 (checkbox)

案例:制作一个复选框

1.代码

2.效果

普通按钮 (button)

案例:制作一个普通按钮

1.代码

2.效果

提交按钮 (submit)

案例:制作一个提交按钮

1.代码

2.效果

重置按钮 (reset)

案例:制作一个重置按钮

1.代码

2.效果.

文件上传框 (file)

案例:制作一个文件上传框

1.代码

2.效果

Textarea 控件

案例:制作一个Textarea控件

1.代码

2.效果图

select控件

案例:select的简单使用

1.代码

2.效果

单行文本框 (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控件
1. 用途：定义一个下拉列表。
2. 属性：
  - 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>