nature-god

html input的认识

input的类型:

1、text 文本框

2、password 密码框

3、radio 单选框

4、checkbox 复选框

5、button 普通按钮

6、submit 提交按钮

7、reset 重置按钮

8、image 图像按钮

9、file 文件按钮

代码演示

<!DOCTYPE html>
<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>
图片效果

 

 

分类:

技术点:

相关文章: