单行文本域

语法格式:<input  type = “text” 属性 = “值” />

常用属性

1  name:文本框的名字。命名规则是:可以包含字母、数字、下划线,只能以字母开头。

2  type:表单元素的类型。

3  value:文本框中的值。

4  size:文本框的长度,以“字符”为单位。

5  maxLength:最多可以输入多少个字符,超出的就输不进去了。

6  readonly:只读属性。可以选中,但不能修改。如:readonly = “readonly”

7  disabled:禁用属性。不能选中,不能修改。如: disabled = “disabled”

举例说明:<input type="text" name="username" />

单行密码域

语法格式:<input  type = “password” 属性 = “值”  />

常用属性

1  name:密码框的名字。命名规则是:可以包含字母、数字、下划线,只能以字母开头。

2  type:表单元素的类型。

3  value:元素中的值。

4  size:元素的长度,以“字符”为单位。

5  maxLength:最多可以输入多少个字符,超出的就输不进去了。

6  readonly:只读属性。可以选中,但不能修改。如:readonly = “readonly”

7  disabled:禁用属性。不能选中,不能修改。如: disabled = “disabled”

单选按钮

语法格式:<input  type = “radio”  属性 = “值”  />

常用属性

1  Name:元素的名称

2  Value:元素的值,该value中数据将发往服务器。

3  Checked:默认选择哪一项。如:checked = “checked”

注意:一组单选按钮,只能选择一个,但name的值必须一致。如:name = “sex”

      单选按钮用户自己不能输入内容,用户只能选择,因此必须为它指默认值value

复选框

1  语法格式:<input  type = “checkbox”  属性 = “值”  />

2  常用属性

3  Name:元素的名称

4  Value:元素的值

5  Checked:默认选中。如:checked = “checked”

注意:复选框也是一组选项,因此name的值必须一致。在PHP中,使用数组来获取多个同名的name的值。

复选框可以同时选多个,也可以一个都不选。

各种按钮

1 提交按钮:<input type="submit" value="提交表单" />

2  重置按钮:<input type="reset" value="重新填写" />

3  图片按钮:<input type="image" src="data:images/btn02.png" />   //功能就是提交表单,与submit按钮功能一样

4  普通按钮:<input type="button" onclick="javascript:window.close()" value="关闭窗口" />

5  普通按钮本身是不具备任何功能的,一般要JS程序配合使用,实现相应的功能。

隐藏域

功能:隐藏域就是看不见的一个框。传递一些值,而这个值又不想让别人看见。

用处:主要用于PHP后面程序,如:修改某一条新闻内容时,需要传递一个新闻的id号。

语法格式:<input  type = “hidden”  name = “名称”  value = “默认值”  />

上传文件域

语法格式:<input  type = “file”  属性 = “属性”  />

常用属性

1  name:表单元素的名称

2  value:表单元素的值,这个值其实就是上传的文件名。value属性是只读属性,这个value的内容只能来自手动选择上传的文件,而不能用户自己指定一个路径。为了安全起见,value是只读的。

注意:现在只能实现上传文件框,而不能真正实现上传功能,上传功能用PHP来实现的。

<input> type 属性的更多相关文章

  1. input type属性为number时,去掉右边的上下箭头

    加上样式: input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; ...

  2. HTML中强大的input标签属性

    用了许久的html,<input>这个标签是最常用的标签之一. <input type="">标签中type属性是必不可少的,以往我最常用的有 type=& ...

  3. HTML5新增input标签属性

    一. input type属性 <form action=""> 邮箱<input type="email" name="" ...

  4. [Liferay6.2.2]AUI的小坑:input的type属性

    <aui:input name="name" label="姓名" value="<%=student.getName() %>&q ...

  5. 修改input的type属性

    在ff和chrome中是可以直接修改input的type属性的,但是在ie下面是不允许的. 用jquery 的attr方法去修改,在jquery1.8.3版本会直接抛出异常,但在1.9及以上版本就不再 ...

  6. input的type属性的修改

    记录一下成长的历程吧! 刚开始写,没什么文笔,也没什么技术含量,可能主要的是纪录一下平常工作学习中遇到的问题,以及解决的办法吧.或者只有问题,没有解决办法. 前两天项目中遇到的一个问题,由于之前一直没 ...

  7. HTML <input> 标签的 type 属性

    HTML <input> 标签的 type 属性 HTML <input> 标签 实例 下面的表单拥有两个输入字段以及一个提交按钮: <form action=" ...

  8. js修改input的type属性问题

    js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...

  9. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

随机推荐

  1. HDU 2874 /// tarjan离线求森林里两点的距离

    题目大意: 在一个森林里 询问 u v 两点 若不能到达输出 "Not connected" 否则输出两点距离 https://blog.csdn.net/keyboarderqq ...

  2. haproxy Mycat集

    8-1   镜像haproxy docker run -it --privileged --name haproxy  docker.io/centos:latest 8-2wget http://w ...

  3. Selenium(一)---Selenium的安装和使用

    一.前言 最近在帮一个老师爬取网页内容,发现网页是动态加载的,为了拿到全部的网页数据,这里使用到了Selenium.Selenium 是一个用于Web应用程序测试的工具,它可以模拟真实浏览器,支持多种 ...

  4. 2019-4-29-win10-uwp-如何判断一个控件在滚动条的里面是用户可见

    title author date CreateTime categories win10 uwp 如何判断一个控件在滚动条的里面是用户可见 lindexi 2019-04-29 10:40:33 + ...

  5. Haar分类器方法

    一.Haar分类器的前世今生 二.人脸检测属于计算机视觉的范畴,早期人们的主要研究方向是人脸识别,即根据人脸来识别人物的身份,后来在复杂背景下的人脸检测需求越来越大,人脸检测也逐渐作为一个单独的研究方 ...

  6. 牛客CSP-S提高组赛前集训营1

    牛客CSP-S提高组赛前集训营1 比赛链接 官方题解 before:T1观察+结论题,T2树形Dp,可以换根或up&down,T3正解妙,转化为图上问题.题目质量不错,但数据太水了~. A-仓 ...

  7. Leetcode976. Largest Perimeter Triangle三角形的最大周长

    给定由一些正数(代表长度)组成的数组 A,返回由其中三个长度组成的.面积不为零的三角形的最大周长. 如果不能形成任何面积不为零的三角形,返回 0. 示例 1: 输入:[2,1,2] 输出:5 示例 2 ...

  8. 如何优雅的在 vue 中添加权限控制

    前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为 ...

  9. [JZOJ6341] 【NOIP2019模拟2019.9.4】C

    题目 题目大意 给你一颗带点权的树,后面有许多个询问\((u,v)\),问: \[\sum_{i=0}^{k-1}dist(u,d_i) \ or \ a_{d_i}\] \(d\)为\(u\)到\( ...

  10. 解析Mybatis入门第二天

    入门第二天 目的:使用Mybatis对数据库中的数据进行简单的操作.例如:增.删.改.查. 前言:同样是使用idea创建一个普通的maven工程(如何创建一个普通的Maven工程可以参考入门第一天的详 ...