HTML5 表单学习
创建表单的方法:
用form标签
form标签常用元素:input:单行表单、select:下拉式表单、textarea:多行文本域
input元素的type属性:text:文本属性、checkbox:多选表单、radio:单选表单、password:密码属性、submit:提交表单、reset:重置表单
select必须连用元素:option
lable关联标签:
显示关联:
显式关联是通过label标签的for属性,显式与另一个表单控件关联。需要注意的是,for属性的值必须是与label标签在同一文档中的可标记表单元素的id,注意是id而不是name
隐式关联:
隐式关联是直接将表单控件放到label标签内,这种情况下,label标签只能包含一个表单元素,包含多个只对第一个有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="" method="">
<!-- action:浏览器输入的数据被传送到的地方,比如一个PHP页面(action.php)-->
<!-- method:数据传送的方式(get(默认)/post)。-->
<input type="text" name="username" value="" placeholder="请输入用户名"/>
<br>
<input type="text" name="pwd" value="" placeholder="请输入密码"/>
<!--type:-->
<!--当type为’text‘时,输入框为文本输入框-->
<!--当type为’password‘时,输入框为密码输入框-->
<!--name:为文本框命名,后期用来给后台程序Java、PHP使用-->
<!--value:为文本输入框设置默认值。(一般起到提示作用)-->
<!--placeholder:提示用户内容的输入格式-->
<br>
你的性别是?
男<input type="radio" name="sex" value="" checked="checked">
<!-- checked=‘checked’时,该选项被默认选中-->
女<input type="radio" name="sex" value="" >
<!-- 注意:同一组的单选按钮,name的值一定要一致,比如上面的例子为同一个名称’sex’,这样同一组的单选按钮才可以起到单选的作用。-->
<br>
你的爱好有?
吃美食<input type="checkbox" name="01" value="" checked="checked">
看电视<input type="checkbox" name="02" value="" >
玩游戏<input type="checkbox" name="03" value="" >
<br>
选择你要报名的课程:
<select name="course" id="">
<option value="python" selected='selected'>Python中级</option>
<option value="go">go 精讲</option>
<option value="web">web全栈</option>
<option value="Linux">Linux深入挖掘</option>
<!-- value=" " :引号里的内容是向服务器提交的值-->
<!-- selected='selected' :默认选中项-->
<!-- -->
</select>
<br>
<!-- 显示关联-->
<label for="myName">姓名:</label>
<input type="text" value="" id="myName" name="myName">
<input type="submit" value="提交">
<input type="reset" value="重置">
<!-- 隐式关联-->
<label>性别
<input type="text" value="" id="theinput" name="theinput">
</label>
<!-- type:只有当type值设置为submit时,按钮才会有提交作用-->
<!-- value:按钮上显示的文字-->
<!-- label标签标识用户项目中的标题-->
<!--它通常关联一个控件,label中的for属性,与某表单控件中的id对应。作为label元素的标签控件。-->
<!--另外,当用户单击该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。-->
<br>
个人说明:
<textarea rows="5" cols="40"></textarea>
</form>
</body>
</html>
HTML5 表单学习的更多相关文章
- HTML5表单学习笔记
表单在网页设计中的作用非常重要,HTML5又增加了表单方面的诸多功能,包括增加input输入类型,input属性,form元素,form属性等,解决了我们以前比较头疼或者繁琐的功能. 新增的输入类型 ...
- HTML5学习总结-05 HTML5表单
一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...
- Ideal Forms – 帮助你建立响应式 HTML5 表单
Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...
- HTML5 表单元素和属性
HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- 完善:HTML5表单新特征简介与举例——张鑫旭
一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...
- html5表单重写
html5表单重写 一.总结 一句话总结: 表单重写用于在提交按钮上指定表单提交的各种信息,比如action <input type="submit" value=" ...
- HTML5: HTML5 表单属性
ylbtech-HTML5: HTML5 表单属性 1.返回顶部 1. HTML5 表单属性 HTML5 新的表单属性 HTML5 的 <form> 和 <input>标签添加 ...
- 实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
随机推荐
- centos6.5下编译安装单实例MySQL5.1
MySQL5.1版本安装3步曲: 1) ./config 指定编译安装参数 2) make 3) make install 查看系统版本号 [root@meinv01 ~]# cat /etc/red ...
- asp.net MVC项目开发之统计图的使用(前言)
接触这个项目,是项目组长已经完成了多数需求,并且有2个项目需要完工的情况下,让我加入,给了我2个表格,让我去设计出统计图. 第一次做统计图,可以说没有任何经验,不知道该如何下手,表格的数据量 ...
- Gridview的stretchMode等属性详解
<GridView android:id="@+id/grid"android:layout_width="fill_parent"android:lay ...
- 【Java并发工具类】原子类
前言 为保证计数器中count=+1的原子性,我们在前面使用的都是synchronized互斥锁方案,加锁独占访问的方式未免太过霸道,于是我们来介绍另一种解决原子性问题的无锁方案:原子变量.在正式介绍 ...
- c++ 有符号int和无符号int做加减乘除问题
c++ 有符号int和无符号int做加算术运算的问题: 一.运算过程先把有符号的补码数直接看成无符号数,在和无符号数进行算术运算 二.int和unsigned int类型进行混合算数运算时,运算结果为 ...
- Nginx 核心配置
nginx的核心配置在conf/nginx.conf中. 全局配置块 user root; #运行worker进程的账户,user 用户 [组],默认以nobody账户运行 worker_pr ...
- 头部布局,搜索验证和AJAX自动搜索提示,并封装成组件,提高代码复用性
index.html 头部区结构和样式 效果图 静态样式 index.html中的部分 <!-- 头部 --> <div class="header"> & ...
- vue 使用v-for进行循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 5.Android-电话拨号器详解
之前学习了3.Android-ADT之helloworld项目结构介绍后,本章便来写个简单的电话拨号器程序. 实现的步骤如下所示: 1.创建项目 2.写layout/activity_main.xml ...
- 如何阻止a标签跳转
<a href="www.baidu.com">百度</a> 上面为我们的a标签,要想阻止它进行跳转我们该怎么办呢? 当然我们有以下的几种办法_______ ...