html表单元素的基本格式为（必须包含在form标签中）

大致可以分为文本类、按钮类、复选框和单选框、文件选择几类

1.文本类

　　文本框标签<input type = “text“ />，属性size文本框的宽度、maxlength可输入的最大字节长度、readonly=“readonly”文本只读，无法修改
　　密码框标签<input type = “password” />，在页面显示为黑色小圆点
　　隐藏标签(隐藏域)<input type=“hidden” />，不会对页面显示有任何影响，常用于保存页面状态的值
　　文本域标签<textarea></textarea>，属性rows和cols(column)，用于显示用户输入多个数据文本，文本域中的数据会原始的输出（保留原有格式），可以使用value属性得到文本域中的数据。

2.按钮类

　　提交按钮标签<input type=“submit” />
　　重设按钮标签<input type=“reset” />，恢复页面的刚加载时的原始状态。
　　按钮标签<input type=“button”  onclick=“”/>，可以为点击按钮添加点击事件。
　　图像标签<input type=“image” src=“URL” />，点击图片，将点击的位置坐标进行提交。

3.复选框、单选框和文件上传

　　复选框标签<input type=“checkbox”  id=""/><label for=“id”>文本</label>，多个组合在一起的小方块，由用户进行多选，常用属性checked=“checked”默认选中，使用label标签将文字包起来，使用for属性关联到指定的checkbox的id
　　单选按钮签<input type=“radio” />,使用时应注意,单选框总是几个组合在一起，要求都有相同的name属性，用属性checked=“checked”默认选中。设置value属性便于获得选中的数据。
　　文件选择标签<input type=“file” />，form的enctype必须设置为multipart/form-data、method属性为POST

 <html>
     <head>
         <title></title>
         <style type="text/css">
         </style>
         <script type="text/javascript">
         </script>
     </head>
     <body>
         <form>
                 复选:<br />
             <input type="checkbox" id="item1" /><label for="item1">选项一</label>
             <input type="checkbox" id="item2" /><label for="item2">选项二</label>
             <input type="checkbox" id="item3" /><label for="item3">选项三</label>

             <br/>你的性别是：
             <input type="radio" name="sex" value="m" checked="checked"/>男
             <input type="radio" name="sex" value="f" />女
         </form>
     </body>
 </html>

运行结果

HTML之学习笔记（十）表单元素的更多相关文章

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

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

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

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

  3. Symfony2学习笔记之表单

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

  4. 20151223jquery学习笔记--Ajax表单提交

    传统的表单提交, 需要多次跳转页面, 极大的消耗资源也缺乏良好的用户体验. 而这款form.js 表单的 Ajax 提交插件将解决这个问题.一． 核心方法官方网站: http://malsup.com ...

  5. JS学习笔记7_表单脚本

    1.获取表单及表单元素引用的方式 var mForm = document.forms[formName];获取表单引用 mForm.elements[elemName]获取表单元素,如有同名的,则得 ...

  6. Html5学习进阶四 表单元素和表单属性

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...

  7. Vue.js学习笔记--3.表单输入绑定

    整理自官网教程 -- https://cn.vuejs.org/ 利用v-model可以实现表单元素的value与后台数据的双向绑定,具体用法如下: <!--文本--> <input ...

  8. Vue 学习笔记之 —— 表单输入绑定

    Vue 中文文档 https://cn.vuejs.org/ 不多说,直接上干货. v-model 指定,用来在input textarea 等表单元素上创建双向数据绑定,负责监听用户的输入事件,以及 ...

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

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

  10. SpringMVC学习笔记：表单提交 参数的接收

    SpringMVC可以接收原生form表单和json格式数据 有一个名为Book的model,其中的属性如下: 字符串类型的name,数字类型的price,数组类型的cover,集合类型的author ...

随机推荐

  1. Android Studio安装使用图文教程

    原文 http://jingyan.baidu.com/article/1876c852a25cb4890b1376fa.html Google I/O开发者大会上宣布,Android Studio ...

  2. Windows DDB和DIB技术应用(3)--图元外边矩形检测

    GDI/GDI+中只有对字体的外边框的测量,而没有提供对点,线,面,曲线的外边框获取函数.下面是本人利用DIB技术编写的探测简单图元,甚至也可以探测自己定义的复杂图元的外边矩形框的函数.本人已经测试, ...

  3. php 获取汉字拼音首字母的函数

    function getFirstChar($string){ if($string{0}>="A" and $string{0}<="z" )re ...

  4. usb键鼠标驱动分析

    一.鼠标 linux下的usb鼠标驱动在/drivers/hid/usbhid/usbmouse.c中实现 1.加载初始化过程 1.1模块入口 module_init(usb_mouse_init); ...

  5. Unity大中华区主办 第二届Unity 游戏及应用大赛 实力派精品手游盘点

    Unity是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎.包含如今时 ...

  6. ora-06502

    执行一个存储过程时报这个错误 ORA-06502: PL/SQL: 数字或值错误 发现是定义的字符串的缓冲区太小,赋给字符串的值又太大 修改varchar2(20)  →   varchar2(200 ...

  7. poj1160

    题目大意:在一个一维坐标轴上有v个(1<=v<=300)村庄,要建p(1<=p<=30)个邮局,每个村庄都到最近的邮局,要求最小的距离和.   四边形不等式,据说黑书上写得很高 ...

  8. error1

     #include<stdio.h>main(){ int a[10],i,m,n,j;   for(i=3;i<10;i++)    scanf("%d",&a ...

  9. Java数组复制

    System提供了一个静态方法arraycopy(),我们可以使用它来实现数组之间的复制.其函数原型是: public static void arraycopy(Object src, int sr ...

  10. Linux学习之停止进程

    首先,用ps查看进程,方法如下: ps -ef ……smx       1822     1  0 11:38 ?        00:00:49 gnome-terminalsmx       18 ...