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. 可爱的 Python : Python中的函数式编程，第三部分

    英文原文:Charming Python: Functional programming in Python, Part 3,翻译:开源中国 摘要:  作者David Mertz在其文章<可爱的 ...

  2. docker 创建新的镜像到私有仓库

    docker:/data# docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES bd6db4127a9e centos &q ...

  3. req.xhr在express中的应用

    req.xhr判断请求来自ajax还是普通请求: 若为ajax则是为true 这个属性是通过判断headers中的 x-requested-with的值来判断的 下面是来自ajax的请求: 1 hos ...

  4. ADT Example

    Example Data Types: Integer, and Character Example (Integer Data Type) The integer data type can con ...

  5. 【双向广搜+逆序数优化】【HDU1043】【八数码】

    HDU上的八数码 数据强的一B 首先:双向广搜 先处理正向搜索,再处理反向搜索,直至中途相遇 visit 和 队列都是独立的. 可以用一个过程来完成这2个操作,减少代码量.(一般还要个深度数组) 优化 ...

  6. HTML5表单增强

    感觉最大的改变就是表单元素可以不写在form标签中.写在其他地方,加个form属性就能提交了别的嘛感觉没什么,表单验证也不能提示信息,感觉不实用 <!DOCTYPE html> <h ...

  7. ListBox第一行字体比其他行小

    ListBox第一行字体比其他行小,把字体设置成“宋体”就可以了.

  8. VS中，无法嵌入互操作类型“……”，请改用适用的接口的解决方法

    最近使用VS,在引用COM组件的时候,出现了无法嵌入互操作类型“……”,请改用适用的接口的错误提示.查阅资料,找到解决方案,记录如下: 选中项目中引入的dll,鼠标右键,选择属性,把“嵌入互操作类型” ...

  9. windows如何获取Win10 Win8 Win8.1版本

    GetVersionEx 在win8 win8.1 win10 之后已经无法使用,如果非要使用的话需要让exe嵌入manifest,mainfest如下.这个文件需要已utf-8存储. <?xm ...

  10. OC语法6——内存管理之引用计数器（retain,release）

    OC内存管理: 一.引用计数器: Java有垃圾回收机制(Garbage Collection,GC).也就是说当我们创建对象后,不需要考虑回收内存的事,Java的垃圾回收机制会自动销毁该对象,回收它 ...