html input标签的type属性

<!-- 示例代码：HTML input 标签的 type 属性 -->

<!-- 文本输入框 -->
<input type="text" name="username" placeholder="请输入用户名">

<!-- 密码输入框 -->
<input type="password" name="password" placeholder="请输入密码">

<!-- 单选按钮 -->
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>

<!-- 复选框 -->
<label><input type="checkbox" name="interest" value="sports"> 运动</label>
<label><input type="checkbox" name="interest" value="music"> 音乐</label>

<!-- 提交按钮 -->
<input type="submit" value="提交">

<!-- 文件上传 -->
<input type="file" name="profile_pic">

<!-- 按钮 -->
<input type="button" value="点击我" onclick="alert('你点击了按钮!')">

<!-- 日期选择器 -->
<input type="date" name="birthday">

<!-- 颜色选择器 -->
<input type="color" name="favorite_color">

解释说明：

• type="text"：创建一个单行文本输入框，用户可以在其中输入文本。
• type="password"：创建一个密码输入框，用户输入的内容会被隐藏（通常显示为圆点）。
• type="radio"：创建一组单选按钮，用户只能选择其中一个选项。
• type="checkbox"：创建一组复选框，用户可以选择多个选项。
• type="submit"：创建一个提交按钮，用于提交表单数据。
• type="file"：创建一个文件上传控件，用户可以从中选择文件进行上传。
• type="button"：创建一个普通按钮，通常与 JavaScript 结合使用来触发某些操作。
• type="date"：创建一个日期选择器，用户可以选择日期。
• type="color"：创建一个颜色选择器，用户可以选择颜色。