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

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

标签：

Html/CSS JavaScript Vue.js

概述

本文详细讲解了input标签的基础概念和语法，并通过实战项目展示了如何使用input标签创建各种类型的输入控件，包括文本、密码、单选按钮和复选框等。此外，文章还提供了表单提交和验证的示例代码，帮助读者掌握input标签项目实战的技巧和注意事项。input标签项目实战涵盖了从基础到进阶的多个方面，包括兼容性问题和常见错误的解决方法。

输入标签基础概念

什么是input标签

<input> 标签是HTML中用于创建各种类型的输入控件的基本标签。它允许用户在网页上输入数据，例如文本、密码、单选按钮等。它通常是与<form>标签结合使用的，用于收集用户数据并将其发送到服务器进行处理。value属性定义输入字段的初始值，用户可以修改这个值。

input标签的基本语法

<input> 标签的基本语法如下：

<input type="type" name="name" value="value" />

type：定义输入控件的类型。常见的类型包括text、password、radio、checkbox等。
name：定义输入字段的名称。该名称用于标识输入字段并允许服务器端脚本识别和处理输入内容。
value：定义输入字段的初始值或默认值。

示例代码

以下是一个简单的<input>标签示例：

<form>
  <input type="text" name="username" value="请输入用户名" />
</form>

常见类型属性实战

text类型

text 类型是最常见的input类型之一，用于接收纯文本输入。它的语法如下：

<input type="text" name="text-field" value="初始值" />

name：定义输入字段的名称。
value：定义输入字段的初始值。

示例代码

<form>
  <label for="user-name">用户名:</label>
  <input type="text" id="user-name" name="username" value="请输入用户名" />
</form>

password类型

password 类型用于输入密码。输入的文本会以星号或其他字符显示。它的语法如下：

<input type="password" name="password-field" value="初始值" />

name：定义输入字段的名称。
value：定义输入字段的初始值。

示例代码

<form>
  <label for="user-password">密码:</label>
  <input type="password" id="user-password" name="password" value="请输入密码" />
</form>

radio和checkbox类型

radio 类型用于单选按钮，允许用户从多个选项中选择一个。checkbox 类型用于复选框，允许用户选择多个选项。这些类型的语法如下：

<input type="radio" name="radio-group" value="选项值" checked>
<input type="checkbox" name="checkbox-group" value="选项值" checked>

name：定义输入字段的名称。对于单选按钮，具有相同名称的所有radio按钮视为一个组。
value：定义输入字段的值。
checked：定义输入字段默认为选中状态。

示例代码

<form>
  <label>
    <input type="radio" name="gender" value="male" checked> 男
  </label>
  <label>
    <input type="radio" name="gender" value="female"> 女
  </label>
  <br>
  <label>
    <input type="checkbox" name="interests" value="sports"> 体育
  </label>
  <label>
    <input type="checkbox" name="interests" value="music"> 音乐
  </label>
  <label>
    <input type="checkbox" name="interests" value="art"> 艺术
  </label>
</form>

实战应用：创建简单的表单

使用input标签构建登录界面

一个简单的登录界面通常包含用户名和密码输入框。我们可以使用<input>标签来构建这个登录界面。

示例代码

<form>
  <label for="login-username">用户名:</label>
  <input type="text" id="login-username" name="username" value="请输入用户名" />
  <br>
  <label for="login-password">密码:</label>
  <input type="password" id="login-password" name="password" value="请输入密码" />
  <br>
  <input type="submit" value="登录">
</form>

表单提交和事件处理

当用户点击提交按钮后，表单数据会被发送到服务器进行处理。我们可以使用JavaScript来添加一些事件处理，例如在提交表单前进行验证或提供错误提示。

示例代码

<!DOCTYPE html>
<html>
<head>
  <title>登录页面</title>
</head>
<body>
<form id="login-form">
  <label for="login-username">用户名:</label>
  <input type="text" id="login-username" name="username" value="请输入用户名">
  <br>
  <label for="login-password">密码:</label>
  <input type="password" id="login-password" name="password" value="请输入密码">
  <br>
  <input type="submit" value="登录">
</form>

<script>
  document.getElementById('login-form').addEventListener('submit', function(event) {
    let username = document.getElementById('login-username').value;
    let password = document.getElementById('login-password').value;
    if (username === '' || password === '') {
      alert('用户名和密码不能为空！');
      event.preventDefault();
    }
  });
</script>
</body>
</html>

进阶属性讲解

使用placeholder属性

placeholder 属性用于定义输入框的提示文本。当用户点击输入框时，提示文本会消失。它帮助用户更好地了解输入内容的要求。

示例代码

<form>
  <label for="example">示例输入框:</label>
  <input type="text" id="example" name="example" placeholder="请输入示例文本" />
</form>

设置maxlength属性限制输入长度

maxlength 属性定义了输入框的最大字符数。当用户尝试输入超过最大长度的字符时，输入框会停止接受更多的输入。

示例代码

<form>
  <label for="example">限制长度输入框:</label>
  <input type="text" id="example" name="example" placeholder="最多输入5个字符" maxlength="5" />
</form>

示例代码验证输入长度

<!DOCTYPE html>
<html>
<head>
  <title>输入框示例</title>
</head>
<body>
<form>
  <label for="example">示例输入框:</label>
  <input type="text" id="example" name="example" placeholder="请输入示例文本" value="请输入示例文本" maxlength="5" required>
  <br>
  <label for="example2">示例输入框2:</label>
  <input type="text" id="example2" name="example2" placeholder="请输入示例文本2" value="" maxlength="5" required>
  <br>
  <input type="submit" value="提交">
  <script>
    document.getElementById('example').addEventListener('focus', function() {
      if (this.value === this.getAttribute('placeholder')) {
        this.value = '';
      }
    });
    document.getElementById('example').addEventListener('blur', function() {
      if (this.value === '') {
        this.value = this.getAttribute('placeholder');
      }
    });
    document.getElementById('example2').addEventListener('focus', function() {
      if (this.value === this.getAttribute('placeholder')) {
        this.value = '';
      }
    });
    document.getElementById('example2').addEventListener('blur', function() {
      if (this.value === '') {
        this.value = this.getAttribute('placeholder');
      }
    });
    document.getElementById('example').addEventListener('change', function() {
      if (this.value.length > this.getAttribute('maxlength')) {
        alert('输入的字符数超过限制！');
        event.preventDefault();
      }
    });
  </script>
</form>
</body>
</html>

实战项目：用户信息注册表单

构建用户注册界面

一个用户注册界面通常包括用户名、密码、确认密码、邮箱和电话号码等输入字段。我们可以使用<input>标签构建这样的注册界面。

示例代码

<form id="registration-form">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" placeholder="请输入用户名" required>
  <br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" placeholder="请输入密码" required>
  <br>
  <label for="confirm-password">确认密码:</label>
  <input type="password" id="confirm-password" name="confirm-password" placeholder="请再次输入密码" required>
  <br>
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" placeholder="请输入邮箱地址" required>
  <br>
  <label for="phone">电话号码:</label>
  <input type="tel" id="phone" name="phone" placeholder="请输入电话号码" required>
  <br>
  <input type="submit" value="注册">
</form>

添加验证功能

在用户提交表单之前，我们可以使用JavaScript进行一些验证，例如检查密码是否一致、邮箱格式是否正确等。

示例代码

<!DOCTYPE html>
<html>
<head>
  <title>注册页面</title>
</head>
<body>
<form id="registration-form">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" placeholder="请输入用户名" required>
  <br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" placeholder="请输入密码" required>
  <br>
  <label for="confirm-password">确认密码:</label>
  <input type="password" id="confirm-password" name="confirm-password" placeholder="请再次输入密码" required>
  <br>
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" placeholder="请输入邮箱地址" required>
  <br>
  <label for="phone">电话号码:</label>
  <input type="tel" id="phone" name="phone" placeholder="请输入电话号码" required>
  <br>
  <input type="submit" value="注册">
</form>

<script>
  document.getElementById('registration-form').addEventListener('submit', function(event) {
    let password = document.getElementById('password').value;
    let confirmPassword = document.getElementById('confirm-password').value;
    let email = document.getElementById('email').value;
    let phone = document.getElementById('phone').value;

    if (password !== confirmPassword) {
      alert('两次输入的密码不一致！');
      event.preventDefault();
    }

    if (!isValidEmail(email)) {
      alert('请输入有效的邮箱地址！');
      event.preventDefault();
    }

    if (!isValidPhone(phone)) {
      alert('请输入有效的电话号码！');
      event.preventDefault();
    }
  });

  function isValidEmail(email) {
    let emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return emailPattern.test(email);
  }

  function isValidPhone(phone) {
    let phonePattern = /^1[3456789]\d{9}$/;
    return phonePattern.test(phone);
  }
</script>
</body>
</html>

常见问题与注意事项

input标签的兼容性问题

不同浏览器对<input>标签的支持可能有所不同。例如，某些浏览器可能不支持HTML5的新属性，如placeholder和required。为了确保兼容性，建议在使用新特性时，同时为用户提供其他方式的提示和验证。

示例代码

<!DOCTYPE html>
<html>
<head>
  <title>输入框示例</title>
</head>
<body>
<form>
  <label for="example">示例输入框:</label>
  <input type="text" id="example" name="example" placeholder="请输入示例文本" value="请输入示例文本" required>
  <br>
  <label for="example2">示例输入框2:</label>
  <input type="text" id="example2" name="example2" placeholder="请输入示例文本2" value="" required>
  <br>
  <input type="submit" value="提交">
  <script>
    document.getElementById('example').addEventListener('focus', function() {
      if (this.value === this.getAttribute('placeholder')) {
        this.value = '';
      }
    });
    document.getElementById('example').addEventListener('blur', function() {
      if (this.value === '') {
        this.value = this.getAttribute('placeholder');
      }
    });
    document.getElementById('example2').addEventListener('focus', function() {
      if (this.value === this.getAttribute('placeholder')) {
        this.value = '';
      }
    });
    document.getElementById('example2').addEventListener('blur', function() {
      if (this.value === '') {
        this.value = this.getAttribute('placeholder');
      }
    });
    document.getElementById('example').addEventListener('change', function() {
      if (this.value.length > this.getAttribute('maxlength')) {
        alert('输入的字符数超过限制！');
        event.preventDefault();
      }
    });
  </script>
</form>
</body>
</html>

常见错误及解决方法

标签闭合不完整：确保每个<input>标签都有正确的闭合。
未设置name属性：name属性是必须的，因为它用于标识输入字段并允许服务器端脚本识别和处理输入内容。
未设置type属性：type属性定义了输入控件的类型，因此必须设置。
未正确使用placeholder：如果输入框的初始值与placeholder内容一致，那么在某些浏览器中，此初始值可能不会消失。可以通过JavaScript来解决这个问题。
未使用required属性：如果需要强制用户填写某些字段，应使用required属性。

示例代码

<!DOCTYPE html>
<html>
<head>
  <title>输入框示例</title>
</head>
<body>
<form>
  <label for="example">示例输入框:</label>
  <input type="text" id="example" name="example" placeholder="请输入示例文本" value="请输入示例文本" required>
  <br>
  <label for="example2">示例输入框2:</label>
  <input type="text" id="example2" name="example2" placeholder="请输入示例文本2" value="" required>
  <br>
  <input type="submit" value="提交">
  <script>
    document.getElementById('example').addEventListener('focus', function() {
      if (this.value === this.getAttribute('placeholder')) {
        this.value = '';
      }
    });
    document.getElementById('example').addEventListener('blur', function() {
      if (this.value === '') {
        this.value = this.getAttribute('placeholder');
      }
    });
    document.getElementById('example2').addEventListener('focus', function() {
      if (this.value === this.getAttribute('placeholder')) {
        this.value = '';
      }
    });
    document.getElementById('example2').addEventListener('blur', function() {
      if (this.value === '') {
        this.value = this.getAttribute('placeholder');
      }
    });
    document.getElementById('example').addEventListener('change', function() {
      if (this.value.length > this.getAttribute('maxlength')) {
        alert('输入的字符数超过限制！');
        event.preventDefault();
      }
    });
  </script>
</form>
</body>
</html>

以上是关于<input>标签从基础概念到实战项目的详细讲解，希望能够帮助新手更好地理解和使用这个标签。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

RISEBY

手记
篇

粉丝

70

获赞与收藏

317

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 312483 2199

后端通用面试教程

41个小节 30591 343

网络编程入门教程

20个小节 12566 237

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

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

什么是input标签

input标签的基本语法

示例代码

text类型

示例代码

password类型

示例代码

radio和checkbox类型

示例代码

使用input标签构建登录界面

示例代码

表单提交和事件处理

示例代码

进阶属性讲解

使用placeholder属性

示例代码

设置maxlength属性限制输入长度

示例代码

示例代码验证输入长度

构建用户注册界面

示例代码

添加验证功能

示例代码

input标签的兼容性问题

示例代码

常见错误及解决方法

示例代码

阅读免费教程