【HTML】04-input标签

 

 1   <!-- input标签可以通过type属性值的不同表现出不同的效果 -->
 2   <!-- 1、文本框：text（type属性的默认值） -->
 3   昵称：<input type="text"><br><br>
 4 
 5   <!-- 2、密码框：password -->
 6   密码：<input type="password"><br><br>
 7 
 8   <!-- 3、单选框：radio -->
 9   性别：<input type="radio">男<br><br>
10 
11   <!-- 4、多选框：checkbox -->
12   爱好：<input type="checkbox">敲代码<br><br>
13 
14   <!-- 5、文件选择框：file -->
15   <input type="file">
16 
17 
18   <form>
19     <!-- 1、文本框：text    placeholder 占位文本 -->
20     昵称：<input type="text" placeholder="请输入您的昵称"><br><br>
21 
22     <!-- 2、密码框：password -->
23     密码：<input type="password" placeholder="请输入您的密码"><br><br>
24 
25     <!-- 3、单选框：radio   name给相同的值, 就可以单选    checked 默认选中-->
26     性别：<input type="radio" name="sex" checked>男
27           <input type="radio" name="sex">女<br><br>
28     
29     <!-- 4、多选框：checkbox    checked 默认选中-->
30     爱好：<input type="checkbox" checked>敲代码
31           <input type="checkbox" checked>熬夜
32           <input type="checkbox">掉头发<br><br>
33 
34     <!-- 5、文件选择：file   默认只能选中一个文件，当添加multiple属性时, 就可以多选，multiple="multiple" 这种属性名和属性值相同的可以简写，只写multiple-->
35     <input type="file" multiple><br><br>
36 
37     <!-- 按钮 -->
38     <!-- 1、submit：提交按钮 -->
39     <input type="submit">
40 
41     <!-- 2、reset：重置按钮 -->
42     <input type="reset">
43 
44     <!-- 3、button：普通按钮 -->
45     <input type="button" value="普通按钮">
46 
47   </form>

 

posted @ 2021-12-18 21:15  为你编程  阅读(175)  评论(0)    收藏  举报