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 为应用添加数字角标

    今天在论坛上看到了一个帖子,终于搞清了我很久以来的一个困惑,android到底能不能实现ios的角标效果,QQ是怎么实现的.看了这个帖子顿时终于解除了我的困惑. 先说一个下大概的思路: 大家都知道an ...

  2. JVM（Java虚拟机）优化大全和案例实战

    堆内存设置 原理 JVM堆内存分为2块:Permanent Space 和 Heap Space. Permanent 即 持久代(Permanent Generation),主要存放的是Java类定 ...

  3. poj1007 qsort快排

    这道题比较简单,但通过这个题我学会了使用c++内置的qsort函数用法,收获还是很大的! 首先简要介绍一下qsort函数. 1.它是快速排序,所以就是不稳定的.(不稳定意思就是张三.李四成绩都是90, ...

  4. xshell使用命令总结

    这个工具主要是链接linux 并且可以从linux上面下载文件到本地 还有上传本地文件到linux上面 下载首先需要压缩打包命令为: tar -cf am_mailer.tar * sz am_mai ...

  5. 飘逸的python - 赛程表算法

    最近德甲英超西甲各大联赛重燃战火,想起之前写过的一段生成赛程表的代码,用python来写这类东西太舒服了. 这个算法叫做蛇环算法. 即,把所有球队排成一个环形(2列),左边对阵右边,第一支队伍不动,其 ...

  6. Fedora 20忘记root密码

    1.忘记root密码的情况下.用sudo账户$sudo su就行了. 2.直接sudo passwd root就重置了roor密码了.

  7. Spring 4.0 中的 WebSocket 架构

    两年前,客户端与服务器端的全双工双向通信作为一个很重要的功能被纳入到WebSocket RFC 6455协议中.在HTML5中,WebSocket已经成为一个流行词,大家对这个功能赋予很多构想,很多时 ...

  8. java与javac命令笔记

    Java对待.java文件与.class文件是有区别的.对.java文件可以直接指定路径给它,而java命令所需的.class文件不能出现扩展名,也不能指定额外的路径给它,对于Java所需的.clas ...

  9. cursor的形状

    Example:CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a> Exam ...

  10. iOS下移除按钮原生样式

    按钮样式,在 Android 手机浏览器中显示正常,但在 iOS Safari 浏览器中会看到按钮显示为圆角样式,设置 border-radius:0; 也不好使. 这是因为iPhone.iPad 设 ...