表单中各种input汇总
html表单
表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:
1、<form>标签 定义整体的表单区域
- action属性 定义表单数据提交地址
- method属性 定义表单提交的方式,一般有“get”方式和“post”方式
2、<label>标签 为表单元素定义文字标注
for属性指定一个input的id,当点击这个label的文字,相应的input会收到焦点。
3、<input>标签 定义通用的表单元素
- type属性value属性 定义表单元素的值
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
- type="hidden" 定义一个隐藏的表单域,用来存储值
- name属性 定义表单元素的名称,此名称是提交数据时的键名
4、<textarea>标签 定义多行文本输入框
5、<select>标签 定义下拉表单元素
6、<option>标签 与<select>标签配合,定义下拉表单元素中的选项
表单常用样式、属性及示例
- outline 设置input框获得焦点时,是否显示凸显的框线,一般设置为没有,比如:outline:none;
- placeholder 设置input输入框的默认提示文字。
注册表单实例:
<form action="http://www..." method="get">
<p>
<label>姓名:</label><input type="text" name="username" />
</p>
<p>
<label>密码:</label><input type="password" name="password" />
</p>
<p>
<label>性别:</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好:</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片:</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述:</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯:</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>
表单中各种input汇总的更多相关文章
- form表单中的input有哪些类型
form表单中的input有哪些类型 1.button <input type="button"/> 2.checkbox <input type="c ...
- 实现滑动条与表单中的input中的value交互
最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...
- Form 表单中的Input元素回车时不保存表单
在Form表单中如果直接在Input元素里敲回车键,那么默认将提交表单,可以通过keydown事件取消默认此操作 $("form").live('keydown',function ...
- 表单中的input框点击enter到下一个input框
$(function() { $("#form1").on("keydown", "tr input", function() { //响应 ...
- form表单中给input 添加 数量可以增减的按钮
只需给input表单增加type=number即可
- 阻止form表单中的input按下回车时提交表单
给form加属性:onsubmit="return false;"
- html表单中的input元素的两种提交方式比较(get/post)
Http存在两种最常用的提交方式:Get和Post(电话面试有问到两种提交方式的区别) 什么是HTTP? 超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信. HTTP 的工作方式是客 ...
- 表单中Readonly和Disabled的区别(转载)
Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / pass ...
- 表单中Readonly和Disabled的区别(转)
今天做form提交的时候,用到了disabled,form提交的时候怎么获取都是null,后来用hidden解决了这个问题,但是考虑到为什么,最后找到了原因,转载一篇文章,说明一下 原文:http:/ ...
随机推荐
- memcached源码剖析——流程图
参考: http://blog.csdn.net/column/details/memcached-src.html http://calixwu.com/2014/11/memcached-yuan ...
- Javascript 基础知识2017-03-17
JavaScript语法 1.单行注释:// 多行注释:*/ 2.基本数据类型: int 整数型 (不等于四舍五入,把小数舍去) string 字符型 ...
- Ubuntu14.04上修改主机名
Ubuntu14.04上修改主机名 author:headsen chen 2017-10-12 15:41:31 个人原创,转载请注明作者,出处,否则依法追击法律责任 查看主机名:hostname ...
- mybatis-配置文件mybatis-config.xml
在mybatis-config.xml中有初始的配置: <!-- 对事务的管理和连接池的配置 --> <environments default="development& ...
- Proxy和Reflect
原因 最近在写 unar.js(一个技术超越react angular vue)的mvvm库.通过研究proxy的可行性.故作以下研究 Proxy代理一个函数 var fn=function(){ c ...
- new Date的兼容性问题
标准浏览器下正常,结果ie.老版本的IOS微信公众号不支持,搞不懂,原来有兼容性问题 //beginData格式为'yyyy-mm-dd' 1 var _date = new Date(Date.pa ...
- poj-1207 THE 3n+1 problem
Description Problems in Computer Science are often classified as belonging to a certain class of pro ...
- 关于css选择器中有小数点的标签获取
需求说明 因为项目中章节配置的时候有小数点,1,1.1,1.2,1.11的标题,这个时候每一行标题的id,class设置成标题号是独一无二的标记.但是,直接用js获取是获取不到的,例如$('#3.22 ...
- 【数据库】mysql数据库索引
文章归属:http://feiyan.info/16.html,我想自己去写了,但是发现此君总结的非常详细.直接搬过来了 关于MySQL索引的好处,如果正确合理设计并且使用索引的MySQL是一辆兰博基 ...
- SpringBoot快速开发REST服务最佳实践
一.为什么选择SpringBoot Spring Boot是由Pivotal团队提供的全新框架,被很多业内资深人士认为是可能改变游戏规则的新项目.早期我们搭建一个SSH或者Spring Web应用,需 ...