HTML | <input>类型属性

HTML中的 <input> 标签用于创建各种表单控件，包括文本输入框、单选按钮、复选框、下拉列表等等。通过指定输入控件的类型属性，可以将 <input> 标签转换为任意类型的输入控件。

基本语法

<input type="...">

其中 type 属性表示数据输入控件的类型，常用的输入类型包括：

• 文本框：text
• 密码框：password
• 单选框：radio
• 复选框：checkbox
• 下拉列表：select
• 文件上传框：file
• 按钮：button或submit等

使用例子

文本框

<label>用户名:</label>
<input type="text" name="username">

密码框

<label>密码:</label>
<input type="password" name="password">

单选框

<label>性别:</label>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

复选框

<label>爱好:</label>
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="sports">运动

下拉列表

<label>城市:</label>
<select>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

文件上传框

<label>头像:</label>
<input type="file" name="avatar">

按钮

<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">

总结

通过 <input>类型属性，我们可以定制各种不同的表单输入控件，让用户可以方便地进行数据的输入与提交。在实际开发中，我们需要根据实际需求选择合适的输入类型，以便实现更好的用户交互体验。