1.表单是用来收集用户填写的信息，可以说表单就是一个容器，里面的元素的类型可以不一样，所表示的功能也不同。

表单基本语法：

 <html>

 <head>

   <title>表单的基本语法</title>

 </head>

 <body>

 8   <form>

 9   </form>

 </body>

 </html>

2.表单的两属性

action:表示表单提交后发送的URL地址，发送方式用method表示：可选参数有get/post，get传输量比较少，post传输量比较大

 <html>

 <head>

   <title>表单的基本语法</title>

 </head>

 <body>

 8   <form action= "show.aspx" method = "get">

 9      <input type="text"  >

10 <br>

11      <input type="password">

12 <br>

13      <input type="button" value="提交">

14   </form>

 </body>

 </html>

补充：<input>的语法中，完整语法为：

<input type="#">

这里#代码表示类型,可选项是：text，image，password，checkbox(复选框)，radio(单选框)，hidden（隐藏--密码），submit（提交），reset（重置）

3.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <title>登录界面</title>

 </head>

 <body>

    <h1>登录界面</h1>

    <form action="" method="get">

    用户名:<input type="text" name="username"/><br>

    密&nbsp;&nbsp;码:<input type="password" name="pwd"/><br>

    <input type="submit" value="登录"/><input type="reset"/>

 </form>

 </body>

 </html>

4.

 名字：<input type = "text"  value = "请输入名字" name = "username"/> <br/>

 密码：<input type = "password"  name = "pwd"/> <br/>

 ***喜欢的水果***<br/>

 <!-- name = "v1"这里name我们都是取v1，这是为了：将来链接服务器时候，提交的时

 候比较方便-->

 <input type = "checkbox"  name = "v1"/> 西瓜 <br/>

 <input type = "checkbox"  name = "v1"/> 苹果 <br/>

 <!-- name = "sex" 这里单选的表单之中，我们取名必须一样，不然会出现问题-->

 ***选择性别***<br/>

 <input type = "radio"  name = "sex"/> 男 <br/>

 <input type = "radio"  name = "sex"/> 女 <br/>

 ****隐藏(它的用途主要是：既可提交数据，同时不影响界面)<br/>

 <input type = "hidden"  value = "123"  name = "salary"/>

 ****下拉选择框*****<br/>

 请选择你的出生地：

 <!-- 将来提交给网络远端数据库的时候，实际上提交的是像这里的name = "biradd"类

 似的标号-->

 <!-- 像刚刚开始option选项中没有属性value= **，这样的select控件携带的数据是不能

 提交给远端服务器的，必须添加value-->

 <select name = "biradd" >

   <!--实际开发的时候我们还是经验上加：调节下拉框宽度-->

   <option value = "">---请选择---</option>

   <option value = "beijing">北京</option>

   <option value = "shanghai">上海</option>

   <option value = "chongqing">重庆</option>

 <select/><br/>

 ****请留言*****<br/>

 <textarea  cols = '30'  rows = '10' >请这里输入…… </textarea><br/>

 ****请选择你要上传的文件*****<br/>

 <input type = "file" name = "myfile"/>请选择文件

输出结果如下：

html笔记03：表单的更多相关文章

  1. And Design：拓荒笔记——Form表单

    And Design:拓荒笔记——Form表单 Form.create(options) Form.create()可以对包含Form表单的组件进行改造升级,会返回一个新的react组件. 经 For ...

  2. AngularJS 1.2.x 学习笔记（表单校验篇）

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  3. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  4. angular2 学习笔记 ( Form 表单 )

    refer : https://angular.cn/docs/ts/latest/guide/forms.html https://angular.cn/docs/ts/latest/cookboo ...

  5. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  6. iOS开发笔记11:表单键盘遮挡、浮点数价格格式化显示、省市区选择器、View Debugging

    1.表单键盘遮挡 应用场景为一个collectionView上有多个textfield.textView供用户填写信息. 之前输入项较少时,采取的方法比较粗暴,didSelectItemAtIndex ...

  7. HTML5自学笔记[ 3 ]表单验证反馈

    表单控件对象的validity对象可以设置或返回相关的验证信息(在invalid事件处理中获取validity对象): 属性valid:为true所有验证通过,为False至少有一种验证失败. 属性v ...

  8. Symfony2学习笔记之表单

    对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...

  9. Html笔记(七)表单

    表单标签: <form> 表单标签是最常用的标签,用于与服务器端的交互. <input>:输入标签:接受用户输入信息 其中type属性指定输入标签的类型 文本框 text:输入 ...

  10. [学习笔记]--Jfinal 表单提交附件

    近期.项目里面用到了Jfinal 里面的上传附件. Jfinal 的Controller 里面提供了一个 getFile系列方法提供文件上传. 我这里呢,是文件上传和表单參数一起提交. 页面类似下图: ...

随机推荐

  1. java Map及Map.Entry详解(转)

    Map是java中的接口,Map.Entry是Map的一个内部接口. Map提供了一些常用方法,如keySet().entrySet()等方法,keySet()方法返回值是Map中key值的集合:en ...

  2. (原创)spring mvc和jersey rest 组合使用时单例对像实例化两次的BUG及解决办法

    项目中没用spring 的restTemplate 而是采用 jersey来做rest 的实现,一直用着,也没发现有什么不对,后来加入了,以quartz用硬编码方式实现,结果启动项目的时候报错 ,具体 ...

  3. <Chapter 2>2-2-1.用户偏好模式（The User Preferences Pattern）

    在这个模块中我们要创建的应用是一个简单的钟.当一个用户访问这个网站时,这个应用会更具服务器的系统时间显示当前的时间.默认情况下,这个应用使用标准国际时间(UTC)时区显示当前时间.用户可以使用Goog ...

  4. Mahout应用（一）

    Mahout应用(一) Mahout 是应用于hadoop上的数据挖掘工具(废话不多说) 这里先简单介绍一下mahout的一般使用方法. 拿kmeans为列子 Mahout中的kmeans所需要的输入 ...

  5. 现代程序设计 homework-04

    题目要求: 第四次作业,构造一个方阵将指定单词填入 stage 1:每个单词只出现1次,且八个方向各至少有两个单词 stage 2:矩阵长宽相等 stage 3:方阵的四个角都要参与单词的构建 算法思 ...

  6. linux@64 获取时间的性能评估

    听人说gettimeofday 在64bit下有缓存,速度很快,测试下了,感觉不对啊.. #include <time.h> #include <sys/time.h> #in ...

  7. HDU 1828 Picture (线段树+扫描线)(周长并)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1828 给你n个矩形,让你求出总的周长. 类似面积并,面积并是扫描一次,周长并是扫描了两次,x轴一次,y ...

  8. HDU 2874 Connections between cities (LCA)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2874 题意是给你n个点,m条边(无向),q个询问.接下来m行,每行两个点一个边权,而且这个图不能有环路 ...

  9. [置顶] 很荣幸被选为2013年度 CSDN博客之星评选，如果觉得我的文章可以，请投我一票！

    亲爱的小伙伴们,很荣幸我被选为<2013年度CSDN博客之星候选人>,希望大家多多支持,geekguy会继续努力,为大家奉献更好的文章. 投票地址:http://vote.blog.csd ...

  10. [前端JS学习笔记]JavaScript prototype 对象

    一.概念介绍 prototype 对象 : 原型对象.在JavaScript中, 每一个对象都继承了另一个对象,后者称为"原型对象". 只有 null 除外,它没有自己的原型对象. ...