统计
  • 建站日期:2021-03-10
  • 文章总数:518 篇
  • 评论总数:151 条
  • 分类总数:32 个
  • 最后更新:4月20日
文章 未分类

表单form的详细介绍和使用placeholder默认字体提示文本,点击文本就自动清空

梦幻书涯
首页 未分类 正文

 
表单form的详细介绍和使用placeholder默认字体提示文本,点击文本就自动清空
-梦幻书涯 - 莫問前路遙遠- 與君風雪
-第1
张图片

 <!DOCTYPE html> 
 <html lang="en"> 
 <head> 
 <meta charset="UTF-8"> 
 <title>表单标签</title> 
 </head> 
 <body> 
  
 <!-- 
 form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围 
 * 属性: 
 * action:指定提交数据的URL 
 * method:指定提交方式 
 * 分类:一共7种,2种比较常用 
 get: 
 1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。 
 2. 请求参数大小是有限制的。 
 3. 不太安全。 
 post: 
 2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解) 
 2. 请求参数的大小没有限制。 
 3. 较为安全。 
 
 * 表单项中的数据要想被提交:必须指定其name属性 
 
 --> 
 
 <form action="#" method="get"> 
 <label for="识别符号"></label>

例如点击用户名,用户名的输入框就获得焦点,因为i用户名的d=label_id
 
 <label for="username123"> 用户名 </label>:<input type="text" name="username" placeholder="请输入用户名" id="username123"><br> 
 密码:<input type="password" name="password" placeholder="请输入密码"><br>

无论一组单选框还是一组复选框:name必须一样,

利用value 来识别选项的值
 
 性别:<input type="radio" name="gender" value="male" > 男
 <input type="radio" name="gender" value="female" checked> 女
 <br> 
 爱好:<input type="checkbox" name="hobby" value="shopping"> 逛街
 <input type="checkbox" name="hobby" value="java" checked> Java
 <input type="checkbox" name="hobby" value="game"> 游戏<br> 
 
 图片:<input type="file" name="file"><br> 
 隐藏域:<input type="hidden" name="id" value="aaa"> <br> 
 
 取色器:<input type="color" name="color"><br> 
 生日:<input type="date" name="birthday"> <br> 
 生日:<input type="datetime-local" name="birthday"> <br> 
 邮箱:<input type="email" name="email"> <br> 
 年龄:<input type="number" name="age"> <br> 
 
 省份:<select name="province"> 
 <option value="">--请选择--</option> 
 <option value="1">北京</option> 
 <option value="2">上海</option> 
 <option value="3" selected>陕西</option> 
 </select><br> 
 
 自我描述:
 <textarea cols="20" rows="5" name="des"></textarea> 
 
 <br> 
 <input type="submit" value="登录" > 
 <input type="button" value="一个按钮" ><br> 
 <input type="image" src="img/regbtn.jpg"> 
 
 
 </form> 
 
 
 

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

这篇文章最后更新于2019-7-23,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
javaScript基础语法知识
« 上一篇
JavaSwing_2.9: JComboBox(下拉列表框)
下一篇 »

发表评论

HI ! 请登录
注册会员,享受下载全站资源特权。
Array

日历

热门文章