input html

作者：不必假装在乎发布日期:2025-05-26 浏览:18

<!DOCTYPE html>
<html>
<head>
    <title>Input HTML Example</title>
</head>
<body>
    <form>
        <!-- 文本输入框 -->
        <label for="text-input">文本输入:</label>
        <input type="text" id="text-input" name="text-input"><br><br>

        <!-- 密码输入框 -->
        <label for="password-input">密码输入:</label>
        <input type="password" id="password-input" name="password-input"><br><br>

        <!-- 单选按钮 -->
        <p>选择性别:</p>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label><br>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label><br><br>

        <!-- 复选框 -->
        <p>选择兴趣:</p>
        <input type="checkbox" id="interest1" name="interest" value="reading">
        <label for="interest1">阅读</label><br>
        <input type="checkbox" id="interest2" name="interest" value="traveling">
        <label for="interest2">旅行</label><br><br>

        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

解释说明：

<form>：定义一个表单，用于用户输入数据。
<input>：创建各种类型的输入控件，如文本框、密码框、单选按钮和复选框等。
- type="text"：创建一个单行文本输入框。
- type="password"：创建一个密码输入框，输入的内容会被隐藏。
- type="radio"：创建单选按钮，用户只能选择其中一个选项。
- type="checkbox"：创建复选框，用户可以选择多个选项。
- type="submit"：创建一个提交按钮，点击后会提交表单数据。
<label>：为输入控件提供描述性标签，提升可访问性。

上一篇：html 教程

下一篇：html 多选框