表单标签：<input>标签、<label>标签、<select>标签、<textarea>标签 

 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>表单标签1</title>
 7 </head>
 8 <body>
 9     <h3>&lt;input&gt;表单元素</h3>
10     <form action="xxx.php" method="get">
11         <!-- text 文本框 用户可以里面输入任何文字 -->
12         用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br/>
13         <!-- password 密码框 用户看不见输入的密码 -->
14         密码：<input type="password" name="pwd"> <br/>
15         <!-- radio 单选按钮 可以实现多选 -->
16         <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
17         <!-- 单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮 -->
18         性别：男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女"><br>
19         <!-- checkbox 复选框 可以实现多选 -->
20         爱好：吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby" value="睡觉"> 打豆豆 <input type="checkbox" name="hobby" value="打豆豆" checked="checked"> <br>
21         <!-- 点击了提交按钮，可以把表单域 form 里面的表单元素里面的值 提交给后台服务器 -->
22         <input type="submit" value="免费注册">
23         <!-- 重置按钮可以还原表单元素初始的默认状态 -->
24         <input type="reset" value="重新填写">
25         <!-- 普通按钮 button 后期结合js 搭配使用 -->
26         <input type="button" value="获取短信验证码"> <br>
27         <!-- 文件域 使用场景 上传文件使用的 -->
28         上传头像：<input type="file">
29     </form>
30 
31 
32     <h3>&lt;label&gt;表单元素</h3>
33     <form>
34         <label for="text"> 用户名：</label> <input type="text" id="text" name="username">
35         <input type="radio" id="nan" name="sex"> <label for="nan">男</label>
36         <input type="radio" id="nv" name="sex"> <label for="nv">女</label>
37     </form>
38 </body>
39 </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 <body>
 9     <h3>&lt;select&gt;表单元素</h3>
10     <form>
11         籍贯：
12         <select>
13             <option>浙江</option>
14             <option>江苏</option>
15             <option selected="selected">湖北</option>
16             <option>重庆</option>
17         </select>
18     </form>
19 
20     <h3>&lt;textarea&gt;表单元素</h3>
21     <form>
22         今日反馈：<br>
23         <textarea cols="50" rows="5">学习html的第五天，真有趣</textarea>
24     </form>
25 </body>
26 </html>

 

posted @ 2020-10-18 16:01  沐銘梓  阅读(88)  评论(0)    收藏  举报