表单中input的type用法详解

1.type=text。

输入类型是text,这是我们见的最多也是使用最多的,

比如登陆输入用户名,注册输入电话号码,电子邮件,

家庭住址等等。当然这也是Input的默认类型。

参数name:同样是表示的该文本输入框名称。

参数size:输入框的长度大小。

参数maxlength:输入框中允许输入字符的最大数。

参数value:输入框中的默认值。

特殊参数readonly:表示该框中只能显示,不能添加修改。

1 <form>
2 your name:input type="text" name="yourname" size="30"maxlength="20" value="输入框的长度为30,允许最大字符数为20">
3 <br>
4 <input type="text" name="yourname"size="30" maxlength="20" readonly value="你只能读不能修改">
5 </form>

2.type=password

不用我说,一看就明白的密码输入框,最大的区别就是当在此输入

框输入信息时显示为保密字符参数和“type=text”相类似。

3.type=file

<tr >
<td>上传文件:</td>
<td style="padding-left: 10px;"><input type="file" name="file" id="fileInput"></td>
<td style="padding-left: 80px;">
<button type="submit" class="btn btn-primary btn-q btn-outline fa fa-upload" class="easyui-validatebox" data-options="required:true">上传
</button>
</td>
</tr>

4.type=hidden 非常值得注意的一个,通常称为隐藏域:如果一个非常

重要的信息需要被提交到下一页,但又不能或者无法明示的时候。  一句

话,你在页面中是看不到hidden在哪里。最有用的是hidden的值。

<form name="form1">
your hidden info here:
<input type="hidden" name="yourhiddeninfo" value="cnbruce.com">
</form> 

<script>
alert("隐藏域的值是。"+document.form1.yourhiddeninfo.value)。</script>

5.type=button。

标准的一windows风格的按钮,当然要让按钮跳转到某个页面上还需要加入写JavaScript代码。

6.type=checkbox。

多选框,常见于注册时选择爱好、性格、等信息。

参数有name,value及特别参数checked(表示默认选择)。

其实最重要的还是value值,提交到处理页的也就是value。

(name值可以不一样但是不推荐)

<form name="form1">
a:<input type="checkbox" name="checkit"value="a"checked><br>
b:<input type="checkbox" name="checkit" value="b">
<br>
c:<input type="checkbox" name="checkit" value="c">
<br>
</form>
<form name="form1">
a:<input type="checkbox" name="checkit1" value="a" checked><br>
b:<input type="checkbox" name="checkit2" value="b">
<br>
 c:<input type="checkbox" name="checkit3" value="c">
<br>
</form> 

7.type=radio

即单选框,出现在多选一的页面设定中。参数同样有name,value及特别参数checked.。

不同于checkbox的是,name值一定要相同,否则就不能多选一。当然提交到处理页的也还是value值。

<form name="form1">
 a:<input type="radio" name="checkit" value="a"checked>
<br>
b:<input type="radio" name="checkit" value="b">
<br>
c :<input type="radio" name="checkit" value="c">
<br>
 </form>

下面是name值不同的一个例子,就不能实现多选一的效果了

<form name="form1">
 a:<input type="radio" name="checkit1" value="a" checked>
<br> b:<inputtype="radio" name="checkit2" value="b">
<br> c:<input type="radio" name="checkit3" value="c">
<br>
</form>

8.type=image

比较另类的一个,自己看看效果吧,可以作为提交式图片。。

<form name="form1" action="xxx.asp">

时间: 2024-10-06 16:20:31

表单中input的type用法详解的相关文章

form表单中input输入框的用法总结

1. <input type="text">   type类型为text,定义一个可以输入内容文本输入框 2. <input type="submit" value="提交">  type类型为text,定义一个按钮 原文地址:https://www.cnblogs.com/Shinigami/p/10868828.html

boboJquery表单插件ajaxForm用法详解

插件主要的方法: ajaxFormajaxSubmitformToArrayformSerialize fieldSerializefieldValueclearFormclearFieldsresetForm 示例代码: 1 // wait for the DOM to be loaded 2 $(document).ready(function() {  3    // bind 'myForm' and provide a simple callback function   4    $

JavaScript中SetInterval与setTimeout的用法详解

在写H5游戏时经常需要使用定时刷新页面实现动画效果,比较常用即setTimeout()以及setInterval(),但是大家对SetInterval与setTimeout的用法了解吗,下面通过本文给大家详解js中SetInterval与setTimeout的用法,需要的朋友参考下 setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_

1:CSS中一些@规则的用法小结 2: @media用法详解

第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule是一个声明,为CSS提供执行或怎么表现的指令.每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么.这是一个通用的语法,尽管每个at-rule有其它语法变体.常规规则 常规规则遵循下面的语法: 复制代码 代码如下: @[KEYWORD] (RULE); @charset

JSoup 用法详解

清单 1 // 直接从字符串中输入 HTML 文档 String html = "<html><head><title> 开源中国社区 </title></head>" + "<body><p> 这里是 jsoup 项目的相关文章 </p></body></html>"; Document doc = Jsoup.parse(html); // 从

jQuery的bind()方法用法详解

bind()方法用法详解: 此方法是使用比较频繁的方法之一,虽然在API手册上有着对方法的介绍,但是由于语言简短,例子不够详细,可能会造成不能够完全准确的掌握bind()方法的使用,下面就结合实例介绍一下此方法的使用. 语法格式: $(selector).bind(type,[data],function(eventObject)) 此方法可以为所有匹配元素的特定事件绑定事件处理函数,例如: <!DOCTYPE html> <html> <head> <meta

Vue1.0用法详解

Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 4 5 6 7 8 9 10 11 <div id="app"> {{message}} <input v-model="message"> </div> new Vue({ ele: '#app', data: { message:

jQuery 事件用法详解

jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jquery中文文档 简介 jquery 之所以成为最受欢迎的前端库,很大一部分是得益于它的事件具有良好的语义,优秀的兼容性,并且便于管理和扩展. 在这里我会介绍 jquery 事件的一些比较基础的用法. 实现原理 jquery 事件脱胎于浏览器的 addEventListener (W3) 和 attac

CSS中伪类及伪元素用法详解

原文:CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active  大致效果为用鼠标点击时,元素增加特效,鼠标松开时,特效消失.多用在按钮的点击上. 写法: 这里id为box的是一div块,在css中首先设置了他的基本样式,下面为加入:active伪类后需要修改的样式. 未点击时: 点击之后: :active.:hover.: