首页手记 input标签项目实战：新手入门教程

input标签项目实战：新手入门教程

标签：

Html/CSS JavaScript Vue.js

概述

本文详细介绍了input标签在HTML中的使用方法和应用场景，包括各种属性和样式设计。通过实战项目，你将学会如何创建一个简易的注册表单，掌握input标签项目实战技巧。

HTML基础回顾

HTML简介

HTML（HyperText Markup Language）是一种标记语言，用于创建网页。它通过标记文字、图像以及其他内容来定义网页的结构和内容。HTML文档是由浏览器解释并渲染的文本文件，内容以HTML标签的形式嵌入到文档中。HTML文档通常以.html或.htm为扩展名。

标签的基本概念

HTML标签是HTML文档的基本组成部分。标签通常由一对尖括号包围，如<tag>。标签可以是成对出现的，如<p>和</p>；也可以是单个出现的，如<br>。成对出现的标签中，第一个称为开始标签，用于标记内容的开始；第二个称为结束标签，用于标记内容的结束。单个出现的标签只包含一个开始标签，没有结束标签。

input标签的概述

<input>标签是HTML中最常用的标签之一，用于创建表单控件，如输入框、按钮等。<input>标签没有结束标签，其行为和表现主要由type属性决定。type属性定义了输入字段的类型，如文本框、密码框等。

input标签的常见属性

type属性详解

type属性决定了输入框的类型。常见的类型包括：

text：创建一个普通文本输入框。
password：创建一个密码输入框，输入的内容以星号或其他符号显示。
button：创建一个普通按钮。
submit：创建一个提交按钮，用于提交表单数据。
reset：创建一个重置按钮，用于重置表单数据。
checkbox：创建一个复选框。
radio：创建一个单选按钮。
file：创建一个文件上传输入框。
search：创建一个搜索输入框，通常与搜索功能相关联。

示例代码：

<input type="text" placeholder="请输入姓名">
<input type="password" placeholder="请输入密码">
<input type="button" value="点击按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="checkbox" value="选项1"> 选项1
<input type="radio" name="选项" value="选项1"> 选项1
<input type="file" placeholder="上传文件">
<input type="search" placeholder="搜索内容">

value属性的应用

value属性用于设置输入框的默认值。当用户没有输入任何内容时，输入框会显示这个默认值。

示例代码：

<input type="text" value="默认值">
<input type="password" value="默认密码">
<input type="button" value="点击按钮">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="checkbox" value="选项1" checked> 选项1
<input type="radio" name="选项" value="选项1" checked> 选项1
<input type="file" value="默认文件">
<input type="search" value="搜索内容">

name属性的作用

name属性用于为输入框指定一个名称。在表单提交时，这个名称会被用来标识输入框的数据。通常用于服务器端处理表单数据。

示例代码：

<form action="/submit" method="post">
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="password" name="password" placeholder="请输入密码">
    <input type="submit" value="提交">
</form>

input标签的使用场景

文本输入框的使用

文本输入框是最常见的输入控件，用于用户输入文本信息。通过设置type="text"可以创建一个文本输入框。

示例代码：

<form action="/submit" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <br>
    <label for="email">邮箱:</label>
    <input type="text" id="email" name="email" placeholder="请输入邮箱">
    <br>
    <input type="submit" value="提交">
</form>

密码输入框的使用

密码输入框用于输入密码，输入内容会被隐藏。通过设置type="password"可以创建一个密码输入框。

示例代码：

<form action="/submit" method="post">
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" placeholder="请输入密码">
    <br>
    <input type="submit" value="提交">
</form>

单选按钮和复选框的应用

单选按钮和复选框用于选择一个或多个选项。单选按钮通过type="radio"创建，复选框通过type="checkbox"创建。单选按钮可以设置name属性来分组，同一组中只能选择一个选项。

示例代码：

<form action="/submit" method="post">
    <label for="选项1">选项1</label>
    <input type="radio" id="选项1" name="选项" value="选项1">
    <br>
    <label for="选项2">选项2</label>
    <input type="radio" id="选项2" name="选项" value="选项2">
    <br>
    <label for="选项3">选项3</label>
    <input type="checkbox" id="选项3" name="选项3" value="选项3"> 选项3
    <br>
    <label for="选项4">选项4</label>
    <input type="checkbox" id="选项4" name="选项4" value="选项4"> 选项4
    <br>
    <input type="submit" value="提交">
</form>

input标签的高级用法

日期选择器的集成

日期选择器允许用户选择日期，通过设置type="date"可以创建一个日期选择器。这个输入框通常显示一个日历图标，用户可以选择一个日期。

示例代码：

<form action="/submit" method="post">
    <label for="生日">生日:</label>
    <input type="date" id="生日" name="生日">
    <br>
    <input type="submit" value="提交">
</form>

文件上传的实现

文件上传输入框允许用户上传文件，通过设置type="file"可以创建一个文件上传输入框。用户可以选择一个或多个文件，然后上传到服务器。

示例代码：

<form action="/submit" method="post" enctype="multipart/form-data">
    <label for="文件">上传文件:</label>
    <input type="file" id="文件" name="文件">
    <br>
    <input type="submit" value="提交">
</form>

搜索框的优化

搜索框通常用于用户搜索内容。通过设置type="search"可以创建一个搜索框。一些浏览器和设备可能会为搜索框提供特殊的搜索图标和功能。

示例代码：

<form action="/search" method="get">
    <label for="搜索">搜索:</label>
    <input type="search" id="搜索" name="搜索" placeholder="搜索内容">
    <br>
    <input type="submit" value="搜索">
</form>

input标签的样式设计

CSS基础回顾

CSS（Cascading Style Sheets）用于定义网页的样式。它可以通过选择器来指定样式，如标签选择器、类选择器、ID选择器等。CSS样式通常嵌入在HTML文件中，或者通过外部样式表文件链接。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .input-style {
            width: 200px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .button-style {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <input type="text" class="input-style" placeholder="请输入内容">
    <input type="button" class="button-style" value="按钮">
</body>
</html>

修改input标签的样式

可以使用CSS来修改<input>标签的样式。例如，可以设置宽度、高度、边框、圆角等。

示例代码：

<!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-style {
            width: 200px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .button-style {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <input type="text" class="input-style" placeholder="请输入内容">
    <input type="button" class="button-style" value="按钮">
</body>
</html>

响应式设计的应用

响应式设计是一种使网页在不同设备上自适应显示的技术。可以通过媒体查询来设置不同设备上的样式。

示例代码：

<!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-style {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .button-style {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
        }
        @media (min-width: 600px) {
            .input-style {
                width: 50%;
            }
        }
    </style>
</head>
<body>
    <input type="text" class="input-style" placeholder="请输入内容">
    <input type="button" class="button-style" value="按钮">
</body>
</html>

实战项目：简易注册表单

需求分析

为了更好地理解<input>标签的应用，我们将创建一个简易的注册表单。注册表单通常包括用户名、密码、邮箱等输入框。用户可以填写信息并提交表单。

HTML结构搭建

首先创建一个基本的HTML结构，包括表单元素。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易注册表单</title>
</head>
<body>
    <form action="/submit" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" placeholder="请输入密码">
        <br>
        <label for="email">邮箱:</label>
        <input type="text" id="email" name="email" placeholder="请输入邮箱">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
</html>

CSS样式美化

接下来，为表单添加一些基本的样式，使其看起来更美观。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易注册表单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        form {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        label {
            display: block;
            margin-bottom: 10px;
        }
        input[type="text"],
        input[type="password"],
        input[type="email"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <form action="/submit" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" placeholder="请输入密码">
        <br>
        <label for="email">邮箱:</label>
        <input type="text" id="email" name="email" placeholder="请输入邮箱">
        <br>
        <input type="submit" value="注册">
    </form>
</body>
</html>

常见错误及调试

错误1：表单提交后页面未刷新

如果表单提交后页面未刷新，可能是因为服务器端未正确处理提交的请求。检查服务器端的逻辑是否正确处理了表单数据。

错误2：输入框样式不一致

如果输入框的样式不一致，可能是因为CSS选择器设置错误或样式覆盖。检查CSS选择器是否正确，并确保没有冲突的样式。

错误3：输入框失去焦点时未显示错误信息

通常在输入框失去焦点时，需要验证输入内容是否符合要求。如果未显示错误信息，可能是因为JavaScript代码未正确设置。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易注册表单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        form {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        label {
            display: block;
            margin-bottom: 10px;
        }
        input[type="text"],
        input[type="password"],
        input[type="email"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
        .error {
            color: red;
            font-size: 0.9em;
        }
    </style>
</head>
<body>
    <form action="/submit" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <span class="error" id="username-error"></span>
        <br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" placeholder="请输入密码">
        <span class="error" id="password-error"></span>
        <br>
        <label for="email">邮箱:</label>
        <input type="text" id="email" name="email" placeholder="请输入邮箱">
        <span class="error" id="email-error"></span>
        <br>
        <input type="submit" value="注册">
    </form>
    <script>
        document.getElementById('username').addEventListener('blur', function() {
            var username = this.value;
            if (!username) {
                document.getElementById('username-error').textContent = '用户名不能为空';
            } else {
                document.getElementById('username-error').textContent = '';
            }
        });
        document.getElementById('password').addEventListener('blur', function() {
            var password = this.value;
            if (!password) {
                document.getElementById('password-error').textContent = '密码不能为空';
            } else {
                document.getElementById('password-error').textContent = '';
            }
        });
        document.getElementById('email').addEventListener('blur', function() {
            var email = this.value;
            if (!email) {
                document.getElementById('email-error').textContent = '邮箱不能为空';
            } else {
                document.getElementById('email-error').textContent = '';
            }
        });
    </script>
</body>
</html>

总结

通过以上步骤，我们创建了一个简易的注册表单，并使用了<input>标签的各种属性和样式。通过这种方式，可以更好地理解和应用<input>标签的功能。希望本教程对你有所帮助，如果需要更多学习资料，可以参考慕课网。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

料青山看我应如是

手记
篇

粉丝

97

获赞与收藏

353

关注作者，订阅最新文章

相关文章推荐

H5新标签(适合新手入门)

SpringBoot项目实战（10）：自定义freemarker标签

【笔记】MindManager 2018新手入门教程

React 入门实例教程

【手把手】JavaWeb 入门级项目实战 - 文章发布体系（第一节）

阅读免费教程

JavaScript 入门教程

80个小节 311148 2192

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

input标签项目实战：新手入门教程

HTML简介

标签的基本概念

input标签的概述

type属性详解

value属性的应用

name属性的作用

文本输入框的使用

密码输入框的使用

单选按钮和复选框的应用

日期选择器的集成

文件上传的实现

搜索框的优化

CSS基础回顾

修改input标签的样式

响应式设计的应用

需求分析

HTML结构搭建

CSS样式美化

常见错误及调试

错误1：表单提交后页面未刷新

错误2：输入框样式不一致

错误3：输入框失去焦点时未显示错误信息

总结

相关文章推荐

阅读免费教程