html常用表单元素(组件)

html常用表单元素(组件):

语法: <input type = ?/> 总共有10种,另外两种为文本域textarea,下拉列表选择框 select

问号代表的有以下十种:
  1. 文本框(默认——如果没有指定type,默认显示文本框)
   text 语法<input />
  2.密码框——password
  3.单选按钮——radio
  4.复选框——checkbox
  5.普通按钮——button
  6.提交按钮——submit
  7.重置按钮——reset
  8.文件域——file
  9.图像域——image
  10.隐藏域——hidden

 1        文本框:<input type="text" /><br />
 2         密码框:<input type="password" /><br />
 3
 4         单选按钮:    <input type="radio" name="sex"/>男
 5                 <input type="radio" name="sex"/>女<br />
 6
 7         复选按钮:    <input type="checkbox" name="hobby" />唱歌
 8                 <input type="checkbox" name="hobby"/>跳舞
 9                 <input type="checkbox" name="hobby"/>代码<br />
10
11         普通按钮:<input type="button" value="普通按钮"/><br />
12         提交按钮:<input type="submit" value="登陆" /><br />
13         重置按钮:    <input type="reset" value="清空"/><br />
14
15         文件域:    <input type="file" name="file1"/><br />
16         影像域:    <input type="image"  src="../img/btn.jpg"/ width="192" height="120"><br />
17         隐藏域:    <input type="hidden" name="userId"/><br />
18
19         文本域:    <textarea cols="50" rows="10">
20                 请您输入观看《伴我同行》的感想 :)
21         </textarea><br />
22
23         下拉列表选择框:<select>
24             <option>---请输入所在的城市---</option>
25             <option>北京</option>
26             <option>上海</option>
27             <option>广州</option>
28             <option>深圳</option>
29             <option>天津</option>
30         </select>

 

原文地址:https://www.cnblogs.com/Lunix-touch/p/11229195.html

时间: 2024-10-09 22:01:14

html常用表单元素(组件)的相关文章

Jquery常用表单元素操作总结

页面当中经常要做一些checkbox,radio,select,input等表单元素的操作.做为我这样的懒人早就该总结以下,免去用到的时候,不想从头写,又不得不去以前的代码中翻.下面的代码来自实际项目中,亲测可用.呵呵-- 一.checkbox 对checkbox的判断往往是checkbox有没有被勾选.也经常有一个复选框控制其它全部复选框的选中和取消选中.如下图: 页面左上角的复选框的选中控制表格中所有的复选框.代码如下: 为了操作方便,给控制全选的复选框增加一个id叫checkAll 下面的

自定义常用input表单元素三:纯css实现自定义Switch开关按钮

自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面先放HTML代码,看下DOM结构: <input type="checkbox" id="my_switch" class="my_switch"> <label for="my_

jquery 常用的表单元素控制

判断radio是否选中并取得选中的值 One: $("input[name='items']:checked").val(); Two: function checkradio(){ var item = $(":radio:checked"); var len=item.length; if(len>0){ alert("yes--选中的值为:"+$(":radio:checked").val()); } } jque

Ember.js 入门指南——表单元素

文章从(http://ibeginner.sinaapp.com)迁移过来,欢迎访问原页面. Ember提供的表单元素都是经过封装的,封装成了view组件.经过解析渲染之后就会生成普通的HTML标签.更多详细信息你可以查看他们的实现源码:Ember.TextField.Ember.Chechbox.Ember.TextArea. 按照惯例,先创建一个route:ember generate route form-helper. 1,input助手 {{! //app/templates/form

Vue基础语法(样式绑定,事件处理,表单,Vue组件)

样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>vue的样式绑定</title> <style> .a{ /*

HTML表单元素及CSS

表单 一.介绍 <form> 标签表示为表单,表单元素是允许用户在表单中输入内容. 属性:action-提交表单的地址 Method-提交表单的方式.属性值:get/post Enctype-被提交表单的MIME类型 二.表单组件 组件一般被定义在表单中(<form>标签中) <input>标签表示输入框,为空标签. <input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件. 属性1:type,type 属性

html5新增表单元素和属性

从三方面来介绍html5表单的新特性表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body><form action="upload.php" method="post" accept-charset="utf-8" id="form1"&g

利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次).我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景:后来我找到了jquery.val

HTML之学习笔记(十)表单元素

html表单元素的基本格式为(必须包含在form标签中) 大致可以分为文本类.按钮类.复选框和单选框.文件选择几类 1.文本类 文本框标签<input type = “text“ />,属性size文本框的宽度.maxlength可输入的最大字节长度.readonly=“readonly”文本只读,无法修改 密码框标签<input type = “password” />,在页面显示为黑色小圆点 隐藏标签(隐藏域)<input type=“hidden” />,不会对页