ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML form表单使用

2020-12-01 20:01:08  阅读:242  来源: 互联网

标签:香蕉 form 表单 HTML 苹果 橘子 复选框 下拉菜单


 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>

 

标签:香蕉,form,表单,HTML,苹果,橘子,复选框,下拉菜单
来源: https://www.cnblogs.com/dengdingyue/p/14070398.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有