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

于 2024-10-05 18:49:03 发布
阅读量1k 收藏 28
点赞数 26
分类专栏： 前端html+css知识梳理 文章标签： html css 前端 html5 css3 vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76862031/article/details/142716838
版权

目录

单行文本框 (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.效果

 

  1. 单行文本框 (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.效果

未选中效果

选中效果

  1. 密码输入框 (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.效果

非选中状态

选中状态

状态

  1. 单选按钮 (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.效果

  1. 复选框 (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.效果

  1. 普通按钮 (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.效果

鼠标悬浮

原始状态

  1. 提交按钮 (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.效果

鼠标悬浮

原始状态

  1. 重置按钮 (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.效果.

原始状态

鼠标悬浮状态

  1. 文件上传框 (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.效果

原始状态

鼠标悬浮状态

文件上传状态

  1. 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.效果图

  1. 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>

2.效果

                

惜.己
关注
专栏目录
HTML+CSS3 表单与表格综合案例
qq_55786319的博客
11-18 1406
表单+表格的简单运用 1.今日份h5课堂作业 效果图： 思路：表格与表单的综合，要做出宽高不一的单元格，但由于表格的自适应性，所以我用了几个表格来装文字。再就是几个简单的表单控件。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>青年自组织状况调查问卷</title> <style> .head{ text-
HTML表格表单案例
weixin_45969078的博客
11-02 1665
1、表格案例 要求： 按照如下形式创建员工入职登记表，要求 （1）性别（男 女）、婚姻状况（已婚，未婚）、政治面貌（党员，团员）、血型（A,B ,AB）用单选按钮 （2）民族使用下拉列表(汉，苗，回) （3）使用表单提交数据 ； （4）照片使用文件上传 代码 <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/
前端样例（js+css+html）
04-12
现在前后台都不可或缺，该主要是前端页面的样式，js+css+html的组合
HTML+CSS项目案例
qq_52108058的博客
11-30 4087
案例演示：（table、tr、td、th的练习）案例演示：（文本样式图片标签练习）案例演示：（文本样式练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）案例演示：（盒子模型练习）
HTML+CSS:漂亮的HTML表单
weixin_30699443的博客
11-07 5197
编写一个from表单 <form id="payment"> <fieldset> <legend>用户详细资料</legend> <ol> <li> <label for="name"...
HTML+CSS之表格(15个案例+代码+效果图+素材)
最新发布
2301_76862031的博客
10-05 2514
案例:编写一个简单的网页；制作一个带边框的表格，制作一个带边距的表格，制作一个指定宽高的表格，表格内容居中，为table添加背景色，设置行高，使表格内容垂直居中 table属性,border,cellspacing,cellpadding,width,height,align,bgcolor,
html表单制作及实例
专注java二开部署
01-01 2517
这个表单包含了文本输入、电子邮件输入、密码输入、下拉列表和文本框等多种类型的输入。这个表单有两个文本输入字段（名和姓），一个提交按钮，当用户点击提交按钮时，数据会以POST方式发送到服务器的"/submit_form"地址。注意：这只是一个基本的表单，实际上你可能需要包含更多的HTML元素，例如复选框，下拉列表，单选按钮等，以及更复杂的验证和错误处理机制。除了上述的表单元素，HTML表单还可以包括一些用于验证用户输入的元素和特性。属性来定义一个正则表达式，以验证用户输入的数据是否符合特定的格式。
html实例，实现表单
aigo_2021的博客
03-29 7647
1.使用HTML完成下列功能 <!doctype html> <html> <head> <!-- <meta charset="GBK">--> </head> <body> <table width="60%" border="3" align="center" bgcolor="#F0F8FF" borderColor="blue"> <tr> &l.
HTML—表单页面制作
YWQ13447969的博客
04-19 1550
大学生HTML练习之表单页面制作
简单HTML表单实例
编程代码，数据学习开发的日常总结。欢迎关注VX公众号：张飞的猪
12-22 709
表单实例 username: password:
完全免费的前端布局设计UI插件(带完整的实例，Demo页，Api文档)
12-22
完全免费的前端布局设计UI插件，LigerUI, 带完整的实例，Demo功能演示，以及Api文档等等。
非常漂亮的100个前端案例
06-04
非常漂亮的100个前端案例，包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等等，只有你想不到。
HTML5+CSS3网站设计基础教程 源代码.rar
05-15
4. **表单控制**：HTML5增强了表单元素，提供了新的输入类型（如date、email、url）、新的表单控件（如、、），以及更强大的验证功能。 5. **图形绘制**：Canvas API允许开发者使用JavaScript进行动态图形绘制，SVG...
html5+css3+JS代码
05-22
此外，HTML5还改进了表单控件，如新增了日期选择器和搜索框等，使网页更易于访问和交互。 CSS3（层叠样式表第三版）则是用于控制网页外观和布局的样式语言。CSS3引入了多个新模块，如选择器（如:nth-child()、:not...
Web-前端html+css从入门到精通 127 表单扩展之美化控件.zip
05-23
本课程“Web-前端html+css从入门到精通 127 表单扩展之美化控件”主要聚焦于如何使用HTML和CSS来创建美观且功能强大的表单控件。 HTML表单是网页上用于收集用户输入信息的重要元素，常见的如文本框、密码框、复选框...
HTML5+CSS3移动商城-购物车
04-29
- **表单控件增强**：例如`<input type="date">`, `<input type="range">`等，提供更好的用户输入体验。 - **Web Storage**：`localStorage`和`sessionStorage`提供更方便的数据存储方式，用于保存用户购物车状态...
html5+css3 一个表白网页
05-19
6. **表单控件**：更新了表单元素，如新增、等，增强了用户体验。 7. **Web Workers和Web Storage**：Web Workers允许在后台线程中运行脚本，提高处理密集型任务的性能；Web Storage（包括localStorage和...
前端（KO框架）常用控件 html/js范例
qq_38349067的博客
10-13 833
多选框 <!--ko foreach:{data:data,as:'item'}--> <label class=""> <input type="checkbox" class="input-checkbox" data-bind="value:item.id, disable:$root.canModify()" /> <span class=""> <!--ko text:item.name--><!--/ko--> </
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值