码迷,mamicode.com
首页 > Web开发 > 详细

HTML form表单使用

时间:2020-12-07 11:48:35      阅读:8      评论:0      收藏:0      [点我收藏+]

标签:for   nan   点击   通过   form   多行   cte   input   head   

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8" />
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6     <title>表单</title>
 7   </head>
 8             <form action="需要提交的地址">
 9                 <h2>输入框</h2>
10                 <!-- placeholder设置输入框中的文字提示 -->
11                 <input type="text" placeholder="请输入用户名">
12  
13                 <h2>密码框</h2>
14                 <!-- placeholder设置输入框中的文字提示 -->
15                 <input type="password" placeholder="请输入密码">
16  
17                 <h2>复选框</h2>
18                 <!-- 默认选中用checked -->
19                 <input type="checkbox" checked>apple
20                 <input type="checkbox">banana
21                 <!-- 禁止选中用disabled -->
22                 <input type="checkbox" disabled>pear
23  
24                 <h2>单选框</h2>
25                 <!-- 通过name值相同来设置单选 -->
26                 <input type="radio" name="gender">27                 <input type="radio" name="gender">28                 <!-- label标签让鼠标点击文字时也可以选中,通过id值和for值映射 -->
29                 <input type="radio" name="gender" id="man"><label for="man"></label>
30                 <input type="radio" name="gender" id="woman"><label for="woman"></label>
31  
32                 <h2>上传文件</h2>
33                 <input type="file">
34  
35                 <h2>提交/重置</h2>
36                 <input type="submit">
37                 <input type="reset">
38  
39                 <h2>多行文本框</h2>
40                 <!-- cols表示列 rows表示行 -->
41                 <textarea name="" id="" cols="30" rows="10"></textarea>
42  
43                 <h2>下拉菜单</h2>
44                 <select name="" id="">
45                   <option value="">苹果</option>
46                   <option value="">香蕉</option>
47                   <option value="">橘子</option>
48                 </select>
49  
50                 <h2>设置下拉菜单默认选项</h2>
51                 <!-- 通过selected -->
52                 <select name="" id="">
53                   <option value="">苹果</option>
54                   <option value="" selected>香蕉</option>
55                   <option value="">橘子</option>
56                 </select>
57  
58                 <select name="" id="">
59                   <!-- 通过disabled让其在打开下拉菜单中不能选择 -->
60                   <option value="" selected disabled>请选择</option>
61                   <option value="">苹果</option>
62                   <option value="">香蕉</option>
63                   <option value="">橘子</option>
64                 </select>
65  
66                 <!-- size设置下拉菜单没有打开时显示的几项 -->
67                   <select name="" id="" size="2">
68                     <option value="">苹果</option>
69                     <option value="">香蕉</option>
70                     <option value="">橘子</option>
71                 </select>
72  
73                 <!-- multiple设置可多选 -->
74                 <select name="" id="" multiple>
75                   <option value="">苹果</option>
76                   <option value="">香蕉</option>
77                   <option value="">橘子</option>
78               </select>
79             </form>
80   </body>
81 </html>

 

HTML form表单使用

标签:for   nan   点击   通过   form   多行   cte   input   head   

原文地址:https://www.cnblogs.com/dengdingyue/p/14070398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!