html之input的类型_html input类型-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44046450/article/details/107738564

本文介绍了HTML中input的不同类型，包括text、password、radio、checkbox等基本类型，以及HTML5新增的email、tel、number等输入类型，并提供了代码演示和效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html之input的类型

input的类型：

1、text 文本框

2、password 密码框

3、radio 单选框

4、checkbox 复选框

5、button 普通按钮

6、submit 提交按钮

7、reset 重置按钮

8、image 图像按钮

9、file 文件按钮

代码演示

<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
      <!-- <input />   我们的input是一个单标签  br hr  img  base  input     -->
      用户名:  <input  type="text" value="派克钢笔" />   <!-- 这是一个文本框 --> <br />
      密　码:  <input  type="password" maxlength="6" /> <br />  <!-- 这是一个密码框  ctrl+ /  注释的快捷键 -->
      性　别:　
      <input  type="radio" name="sex"  /> 女 
      <input  type="radio" name="sex" /> 男
      <input  type="radio" name="sex" checked="checked"/> 人妖 
      <input  type="radio" name="sex1"/> 未知
       <br />
         <!-- 单选框  如果是一组，我们通过相同的name值 来实现-->
       爱　好:　
       <input type="checkbox" name="hobby" checked="checked" /> 足球 
       <input type="checkbox" name="hobby"/> 篮球  
       <input type="checkbox" name="hobby"/> 乒乓球
       <!-- 复选框 可以同时选择多个 --><br />
       搜索：  <input type="button" value="搜索啥"/>  <!-- 普通按钮 --><br />
       <input type="submit" value="提交表单" /><!-- 提交按钮 -->
       <input type="reset" value="重置表单" /><!-- 重置按钮 --><br />

       <input type="image" src="im.jpg" /><!-- 图像按钮 --><br />
       上传头像: 
       <input type="file" />  <!-- 文件按钮 -->
        
    </body>
</html>

图片效果
在这里插入图片描述
HTML5新增的INPUT type 类型
1、email 邮箱
2、tel 电话
3、number 数字
4、url 网址格式
5、search 搜索
6、range 区域
7、time 时间
8、date 年月日
9、month 年月
10、week 周
11、color 颜色
代码演示：

<!DOCTYPE html> <html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    <fieldset>
    	<legend>HTML5新增的INPUT type 类型  那些表单</legend>
    	<form action="">
            邮箱:  <input type="email" />  <!-- aa@aa.com -->  <br />
            手机:  <input type="tel" />  <!-- 手机格式 数字 -->  <br />
            数字:  <input type="number" />  <!-- 只能 是 数字 -->  <br />
            url:  <input type="url" />  <!-- 网址格式的 -->  <br />
            搜索:  <input type="search" />  <!-- 搜索思密达 -->  <br />
            区域:  <input type="range" />  <!-- 区域 奥哈药 滑块  -->  <br />
            时间:  <input type="time" />  <!--小时 分钟  -->  <br />
            年月日:  <input type="date" />  <!--获得年月日 -->  <br />
            月份:  <input type="month" />  <!--获得年月 -->  <br />
            星期:  <input type="week" />  <!--获得周 -->  <br />
            颜色:  <input type="color" />  <!-- 颜色 -->  <br />
    		<input type="submit" />
    	</form>
    </fieldset>
    </body> </html>

效果演示：
在这里插入图片描述