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. Codeforces 286E

    #include <cstdio> #include <cmath> #include <cstring> #include <algorithm> # ...

  2. Log4Net不生成日志文件

    可能没有初始化配置,在Global文件Application_Start添加 log4net.Config.XmlConfigurator.Configure(); 或者输出日志进行初始化,如(Log ...

  3. 一个C/C++结构体初始化有趣的现象

    我们知道C语言当中结构可以使用{}进行初始化,例如有结构体定义如下: typedef struct type_t { int a; int b; int c; int d; }type_t; 我们可以 ...

  4. Oracle中针对中文进行排序[Z]

    在oracle 9i之前,对中文的排序,是默认按2进制编码来进行排序的. 9i时增加了几种新的选择: 按中文拼音进行排序:SCHINESE_PINYIN_M 按中文部首进行排序:SCHINESE_RA ...

  5. Mantis 1.1.0 报告问题中设置必填项或取消必填项[Z]

    打开/mantis/core/bug_api.php,其中有类似下面的语句 if ( is_blank( $c_summary ) ) {    error_parameters( lang_get( ...

  6. JavaSE复习日记 : 方法的调用和方法的重载

    /* * 方法的调用和方法重载 */ /* * 什么是方法? * 方法就是一个有名字的代码段; * 方法的调用: * 在方法里调用另外一个方法里面的东西就是方法调用; * 或者可以认为"另外 ...

  7. Python核心编程读笔 9： 异常

    第10章 异常一.异常1 检测和处理异常 (1)try-except语句 try: try_suite #监控这里的异常 except Exception[, reason]: except_suit ...

  8. PHP Curl CURLOPT_POSTFIELDS 1024

    resolve : curl_setopt($ch, CURLOPT_HTTPHEADER, array('Expect:')); url: http://www.laruence.com/2011/ ...

  9. leetcode Divide Two Integers python

    class Solution(object): def divide(self, dividend, divisor): """ :type dividend: int ...

  10. JVM学习之常见溢出类型

    Java堆 所有对象的实例分配都在Java堆上分配内存,堆大小由-Xmx和-Xms来调节,sample如下所示: public class HeapOOM { static class OOMObje ...