创建表单的方法：

用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 表单学习的更多相关文章

  1. HTML5表单学习笔记

    表单在网页设计中的作用非常重要,HTML5又增加了表单方面的诸多功能,包括增加input输入类型,input属性,form元素,form属性等,解决了我们以前比较头疼或者繁琐的功能. 新增的输入类型 ...

  2. HTML5学习总结-05 HTML5表单

    一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...

  3. Ideal Forms – 帮助你建立响应式 HTML5 表单

    Ideal Forms 是建立和验证响应式 HTML5 表单的终极框架.它刚刚发布 V3 版本,更小,更快,更具可扩展性.它支持实时验证,完全自适应(适应容器,没有 CSS 媒体查询需要),键盘支持, ...

  4. HTML5 表单元素和属性

    HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...

  5. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  6. 完善：HTML5表单新特征简介与举例——张鑫旭

    一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...

  7. html5表单重写

    html5表单重写 一.总结 一句话总结: 表单重写用于在提交按钮上指定表单提交的各种信息,比如action <input type="submit" value=" ...

  8. HTML5: HTML5 表单属性

    ylbtech-HTML5: HTML5 表单属性 1.返回顶部 1. HTML5 表单属性 HTML5 新的表单属性 HTML5 的 <form> 和 <input>标签添加 ...

  9. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

随机推荐

  1. ubuntu16.04 自建源

    来自于https://www.cnblogs.com/liangqihui/p/7150066.html APT本地源的搭建(可用于局域网apt-get源搭建或者本地源) 本文档介绍使用apt-mir ...

  2. 1 Nginx + 12 Tomcat +2DB 实现2个程序负载均衡

    根据真实生产环境 总结. 硬件:共计5台服务器  1台负载windows.2台业务windows.2台数据库linux 业务:运行两个程序,两个数据库 具体:63服务器安装 Nginx 做负载 :61 ...

  3. Charm Bracelet 一维01背包

    A - Charm Bracelet Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu Su ...

  4. Hexo | 超详细的hexo+githhub page搭建过程

    首先安装node.js 安装git 去Git官网根据你的电脑参数,下载对应版本. 下载完成,通过在命令行输入 git version 查看是否安装成功,有输出版本号说明安装成功. 鼠标邮件菜单里就多了 ...

  5. php/phpmyadmin新手式环境搭建

    之前就在折腾 zabbix 的时候遇到一个情况, 安装 php6 的时候各种库丢失, 最重要的 gd 经常跑路 只是无意中遇到了一种小方式, 现在已经迷糊了, 前天因为在部署 phpAdmin 的时候 ...

  6. 容器监控工具WeaveScope

    最近一段时间整了一些docker容器,弄了一些基于docker的微服务通信,弄好一套服务系统之后,对于服务的性能,基础数据的监控就显的很重要, 不然就是两眼一抹黑了,要不就是维护成本很高,这些都不符合 ...

  7. jquery带下拉列表的购物车组件封装

    按照国际惯例先放效果图 安静的时候它长这样 等待加载时它长这样(功能是设置的按需加载,网速慢或者加载数据大时会出现) 加载之后购物车没有商品时这样 有商品长这样 接下来放代码: cart.html & ...

  8. opencv —— approxPolyDP 生成逼近曲线

    生成逼近曲线:approxPolyDP 函数 该函数采用 Douglas-Peucker 算法(也称迭代终点拟合算法).可以有效减少多边形曲线上点的数量,生成逼近曲线,简化后继操作. 经典的 Doug ...

  9. [Contract] Solidity 遍历 mapping 的一种方式

    思路:为需要遍历的 mapping 再准备一个 list,之后通过 for 循环遍历 list 取得 mapping 的 key. mapping (address => uint) users ...

  10. XSY2666

    题意 有\(n\)种颜色的球,第i种有\(a_i\)个.设\(m=\sum a_i\).你要把这\(m\)个小球排成一排.有\(q\)个询问,每次给你一个\(x\),问你有多少种方案使得相邻的小球同色 ...