【HTML】input 输入框的 10 种样式，没用过的快来学起来吧

最新推荐文章于 2025-02-15 00:23:42 发布

黑口罩

最新推荐文章于 2025-02-15 00:23:42 发布

阅读量1.2k

点赞数 7

分类专栏： # 【HTML】系列文章标签：前端

本文链接：https://blog.csdn.net/xudahai513/article/details/145208015

版权

【HTML】系列专栏收录该内容

6 篇文章

订阅专栏

文本输入框（type="text"）

密码输入框（type="password"）

文本输入框（type="text"）

<input type="text" id="username" placeholder="请输入用户名">

密码输入框（type="password"）

<input type="password" id="password" placeholder="请输入密码">

单选按钮（type="radio"）

<label>性别：</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label></body>

复选框（type="checkbox"）

<label>爱好：</label>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">阅读</label>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">运动</label>

提交按钮（type="submit"）

功能：用于将表单数据提交到服务器。当用户点击提交按钮时，浏览器会收集表单内所有输入元素的值，并将其发送到表单的action属性指定的 URL 地址。

<form action=" ">
  <label for="username">用户名：</label>
  <input type="text" id="username">
  <input type="submit" value="提交">
</form>

重置按钮（type="reset"）

功能：用于将表单内所有输入元素的值重置为初始状态。

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username">
  <input type="reset" value="重置">
</form>

按钮（type="button"）

功能：创建一个普通按钮

 <input type="button" value="我是一个普通的按钮">

日期（type="date"）

<input type="date">

邮箱（type="email"）

功能：如果输入内容不是邮箱格式，则提交不了

<form action=" ">
   <input type="email" >
  <input type="submit" value="提交">
</form>

文件读取（type="file"）

功能：读取文件地址，便于上传文件

<input type="file" >