input_input赋值 - CSDN
input 订阅
一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮:
First name: Last name:
展开全文
一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮:
First name: Last name:
信息
含    义
输入数据源
组    成
两个文本输入框和一个提交按钮
外文名
input
类    别
函数
input函数
返回 String,它包含以 Input 或 Binary 方式打开的文件中的字符。语法Input(number, [#]filenumber)Input 函数的语法具有以下几个部分:部分描述number必要。任何有效的数值表达式,指定要返回的字符个数。filenumber必要。任何有效的文件号。说明通常用 Print # 或 Put 将 Input 函数读出的数据写入文件。Input 函数只用于以 Input 或 Binary 方式打开的文件。与 Input # 语句不同,Input 函数返回它所读出的所有字符,包括逗号、回车符、空白列、换行符、引号和前导空格等。对于 Binary 访问类型打开的文件,如果试图用 Input 函数读出整个文件,则会在 EOF 返回 True 时产生错误。在用 Input 读出二进制文件时,要用 LOF 和 Loc 函数代替 EOF 函数,而在使用 EOF 函数时要配合以 Get 函数。注意 对于文本文件中包含的字节数据要使用 InputB 函数。对于 InputB 来说,number 指定的是要返回的字节个数,而不是要返回的字符个数。
收起全文
  • input标签 各属性解释

    2017-03-22 09:42:40
    input标签最全面的type属性   (2016-08-21 23:56:07) 转载▼ 标签:  type   属性   input   分类: HTML标签 由于时间关系,在上一节中只是简单的列举了input标签中的type属性,在本节中就...

    input标签最全面的type属性

     (2016-08-21 23:56:07)
    标签: 

    type

     

    属性

     

    input

     
    分类: HTML标签

    由于时间关系,在上一节中只是简单的列举了input标签中的type属性,在本节中就详细地来运用input标签中的type属性


    因为以下要举例演示,所以在讲input type之前先了解一下控制input标签的几个基本控制属性,如下:

    1. name属性 :元素的名称;这个不需要多解释了,也就是name的取值代表为当前input元素起个名字;
    2. size属性 :元素的宽度;很多人都知道在HTML中,常见的宽度是用 width 表示的,而在input中 width 属性只使用与 type="image" 时使用,input元素的宽度需要通过size属性来设定,size的值为数字,数字越大input元素越长,数字越小input元素越短;
    3. value属性:定义input元素的默认值;
      当 input type="text"、"password"、"hidden" 时,定义输入字段的初始值;
      当 input type="button", "reset", "submit" 时,定义按钮上的显示的文本;
      当 input type="checkbox", "radio", "image" 时,定义与输入相关联的值;
      注意:input type="checkbox" 和 input type="radio" 中必须设置 value 属性;value属性无法与 input type="file" 一同使用。
    4. maxlength属性:定义input元素中可输入的最长字符数;如 maxlength="50" 表示最多可以输入50个字符;
    5. style属性 :为input元素设定CSS样式;
    6. width属性 :当 input type="image"时,通过width属性控制元素的宽度;
    7. height属性:当 input type="image"时,通过width属性控制元素的高度;

    input type属性大全

    1. type="text":创建单行文本输入框

      type属性文本输入框
      上图代码的意思依次为:input元素类型为文本输入框;元素长度等于30;最多只能输入20个字符;输入框中默认显示“HTML标签”几个字,设定输入CSS样式高度30像素;文字灰色;请看下方显示效果:
      请在文本框中输入文本,最多20个字符 → 

    2.  

      type="password":密码输入框

      type属性密码输入框
      上图代码的意思依次为:input元素类型为密码输入框;元素长度等于30;最多能输入30个字符;输入框中默认显示为空;请看下方显示效果:
      请输入密码,最多30个字符 → 

    3.  

      type="radio":单选按钮

      type属性单选按钮
      图中设置input元素为单选按钮,其中value属性中的值用来设置用户选中该项目后提交到数据库中的值;拥有相同name属性的单选框为同一组,一个组里只能同时选中一个选项;而checked属性表示的是初始选项,在用户还没进行选中之前,初始值会选中“女”这个项目;请在下方选择你的性别:

      男    女    同性恋 


    4. type="checkbox":复选框

      type属性复选框
      设置input元素为复选控件,用户可以进行多个选项,其中value属性中的值用来设置用户选中该项目后提交到数据库中的值;name为控件的名称;请在下方选择你去过的城市:

      广州    深圳    珠海    东莞 


    5. type="button":普通按钮

      type属性普通按钮
      通过type="butt"设置普通按钮控件,在value属性中输入的值为按钮上显示的文本;name代表该按钮的名称;onclick表示处理程序;按钮的显示效果也可以通过CSS样式来设置;请点击按钮 → 

    6. type="submit":提交按钮

      type属性提交按钮
      提交按钮不需要设置onclick参数,在单击提交按钮时可以向服务器发送表单数据,数据会发送到表单的 action 属性中指定的页面;value属性中的值为按钮上显示的文字;请点击提交 → 

    7. type="reset":重置按钮

      type属性重置按钮
      重置按钮的作用是点击之后表单会刷新回到默认状态,在value属性中输入的值为按钮上显示的文本;
      请点击重置 → 

    8. type="image":图像按钮

      type属性图像按钮
      虽然显示是图片,实际是以图片的形式按钮;其中src是链接图片的路径;name为图片名称;width图片宽度;height图片高度;当按下图像按钮会以name中的值向服务器发送信息;请点击下方图像按钮:

           


    9. type="hidden":隐藏域

      隐藏域在页面上不显示,用来存储与传递表单的值,当用户提交表单时,隐藏域的内容会一起提交给处理程序;语法为:input type="hidden" name="hidden" value="提交的值"/

    10. type="file":文件域

      用于从本地硬盘中上传文件并提交,语法:﹤input type="file" name="file" /﹥请在下方上传您的文件;


    HTML5新增input type属性


    1. input type="url":输入URL字段
    2. input type="tel" name="tel":用来输入电话号码

    3. type="search":搜索字符串

      语法:input type="search" name="search" 请搜索 → 

    4. type="email":该控件用来输入"email"地址

      若用户输入的非email格式,那么在支持HTML5的浏览器中提交该表单时,会提示为不是合法格式;

    5. type="color":颜色选择器;语法为:﹤input type="color" id="color"﹥

      使用color属性能直接调用系统的颜色调节窗口,默然为黑色;请选择颜色 → 

    6. type="number":数字字段

      type属性输入数字字段
      用于输入数字的字段,其中min设定允许的最小值;max设定允许的最大值;value规定默认值;还有step可规定合法数字间隔;请输入数字字段 → 

    7. type="range":输入数值控件;

      type属性输入数值控件
      定义用于精确值不重要的输入数字的控件;min属性指定最小值限制,max属性指定最大值限制,step属性规定合法数字间隔,value属性规定默认值,请选择 → 

    8. type="month":年月控件

      语法:input type="month" value="2016-08" value属性用来控制年月;若使用type="week"则为控制(年/周)

    9. type="date":日期控件

      type属性日期控件
      可用来选择或输入日期,包括(年/月/日)不包括时间;其中设定 min 属性控制开始日期,max 属性控制结束日期;请选择日期 →  如果使用type="time" 则用来输入时间,不包括日期。

    10. type="datetime":日期加时间控件(基于UTC时区)

      type属性日期加时间控件
      创建日期时间,包括(年/月/日/时/分/秒/零点几秒) → 

    11. type="datetime-local":日期加时间控件(不带时区)

      时间加日期不带时区
      创建本地日期时间,包括(年/月/日/时/分/秒/零点几秒) → 

    传统属性name type accept alt checked disabled readonly maxlength size src value新增属性autocomplete autofocus novalidate height width list min max step multiple pattern placeholder required form formaction formenctype formmethod formnovalidate formtarget

    前面的话

      form元素只是一个数据获取元素的容器,而容器内的元素称为表单控件。最常用的表单控件是input元素

      accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统元素属性

      autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width这19个属性是HTML5新增的元素属性

     

    传统属性

    name

      name属性用于规定input元素的名称,用于对提交到服务器后的表单数据进行标识,或者在客户端通过javascript引用表单数据

      [注意]只有设置了name属性的表单元素才能在提交表单时传递它们的值

    type

      type属性用来规定input元素的类型

      [注意]如果input元素没有设置type属性,或者设置的值在浏览器中不支持,那么输入类型会变成type="text"

      详细情况移步至此

    accept

      accept属性用来规定能够通过文件上传进行提交的文件类型。理论上可以用来限制上传文件类型,然而它只是建设性的,并很可能被忽略,它接受逗号分隔的MIME类型

      [注意]该属性只能与type="file"配合使用

    <input type="file" accept="image/gif,image/jpeg,image/jpg">

    alt

      alt属性为图像输入规定替代文本,功能类似于image元素的alt属性,为用户由于某些原因无法查看图像时提供备选信息

      [注意]alt属性只能与type="image"的input元素配合使用

    <input type="image" src="#" alt="测试图片">

    checked

      checked属性规定在页面加载时应该被预先选定的input元素,也可以在页面加载后,通过javascript进行设置

      [注意]checked属性只能与type="radio"或type="checkbox"的input元素配合使用

    <input type="radio" name="radio" value="1" checked><input type="radio" name="radio" value="2"><input type="checkbox" name="checkbox" value="1"><input type="checkbox" name="checkbox" value="2"><script>var oInput = document.getElementsByTagName('input');for(var i = 0,len = oInput.length; i < len; i++){    oInput[i].onmouseover = function(){        this.checked = 'checked';    }}    </script>

    disabled

      disabled属性规定应该禁用input元素。被禁用的字段是不能修改的,也不可以使用tab按键切换到该字段,但可以选中或拷贝其文本

      [注意1]disabled属性无法与type="hidden"的input元素一起使用

      [注意2]对于IE7-浏览器必须设置为disabled="disabled",而不可以直接设置disabled,否则使用javascript控制时将失效

    <button id="btn1">输入域可用</button><button id="btn2">输入域不可用</button><input id="test" disabled value="内容"><script>btn1.onclick = function(){    test.removeAttribute('disabled');}    btn2.onclick = function(){    test.setAttribute('disabled','disabled');}    </script>

    readonly

      readonly属性规定输入字段为只读。只读字段是不能修改的,但用户仍然可以使用tab按键切换到该字段,还可以选中或拷贝其文本

      readonly属性可与type="text"或"password"的input元素配合使用

      [注意]IE7-浏览器不支持使用javascript控制readonly属性

    <button id="btn1">输入域只读</button><button id="btn2">输入域可读写</button><input id="test" value="内容" readonly><script>btn1.onclick = function(){    test.setAttribute('readonly','readonly');}btn2.onclick = function(){    test.removeAttribute('readonly');}    </script>

    maxlength

      maxlength属性规定输入字段的最大长度,以字符个数计

      [注意]该属性只能与type="text"或type="password"的input元素配合使用

    <input maxlength="6"><input type="password" maxlength="6">

    size

      size属性对于type="text"或"password"的input元素是可见的字符数;而对于其他类型,是以像素为单位的输入字段宽度

      [注意]由于size属性是一个可视化的设计属性,推荐使用CSS来代替它

    <input size="1"><input type="password" size="2">

    src

      src属性作为提交按钮显示的图像的URL

      [注意]src属性只能且必须与type="image"的input元素配合使用

    <form action="#">    <input name="test">    <input type="image" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/submit.jpg" width="99" height="99" alt="测试图片"></form>

    value

      value属性为input元素设定值。对于不同的输入类型,value属性的用法也不同:

      type="button"、"reset"、"submit"用于定义按钮上的显示的文本

      type="text"、"password"、"hidden"用于定义输入字段的初始值

      type="checkbox"、"radio"、"image"用于定义与输入相关联的值

      [注意1]type="checkbox"或"radio"必须设置value属性

      [注意2]value属性无法与type="file"的input元素一起使用

    <button id="btn1">1</button><button id="btn2">2</button><input id="test"><script>btn1.onclick = btn2.onclick =function(){    test.value=this.innerHTML;}    </script>

     

    新增属性

    autocomplete

      autocomplete属性可以在个别元素或整个表单上开启或关闭浏览器的自动完成功能。当用户在字段开始键入时,浏览器基于之前键入过的值,显示出在字段中填写的选项

      autocomplete属性适用form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color

      [注意]IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效

    <input name="test1" autocomplete="on"><input name="test2" autocomplete="off">    

      详细情况移步至此

    autofocus

      autofocus属性规定在页面加载时,域自动地获得焦点

      autofous属性适用于button、input、keygen、select和textarea元素

    <input name="test1"><input name="test2" autofocus>

    novalidate

      novalidate属性规定在提交表单时不验证form或input域

      novalidate属性适用于form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color

      [注意]IE9-浏览器不支持

      详细情况移步至此

    height

      height属性用于规定image类型的input标签的图像高度

      [注意]该属性只适用于image类型的input标签

    width

      width属性用于规定image类型的input标签的图像宽度

      [注意]该属性只适用于image类型的input标签

    //http://127.0.0.1/form.html?test=123&x=38&y=57#<form action="#">    <input name="test">    <input type="image" src="submit.jpg" width="99" height="99"></form>

    list

      大多数输入类型包含一个属性list,它和一个新元素datalist结合使用,这个元素定义当在表单控件输入数据时可用的一个选项列表。datalist元素自身不会在页面显示,而是为其他元素的list属性提供数据

      list属性适用于form元素以及以下类型的input元素:text、search、url、telephone、email、password、date pickers、range、color

      [注意]IE9-浏览器及safari浏览器不支持

      详细情况移步至此

    min

      min属性规定输入域所允许的最大值 

    max

      max属性规定输入域所允许的最小值

    step

      step属性为输入域规定合法的数字间隔

      min、max、step属性适用于以下类型的input元素:date pickers、number、range

    <input type="number" min="0" max="10" step="0.5" value="6" />

    <input type="range" min="0" max="10" step="0.5" value="6" />

    multiple

      multiple属性规定按住ctrl按键,输入字段可以选择多个值

      该属性适用于type="email"和"file"的input元素

      [注意]该属性IE9-浏览器不支持

    <button id="btn1">打开文件多选</button><button id="btn2">关闭文件多选</button><br><br><input id="test" type="file" multiple><script>btn1.onclick = function(){    test.setAttribute('multiple','');};btn2.onclick = function(){    test.removeAttribute('multiple');};</script>

    pattern

      pattern属性规定用于验证input域的模式。模型pattern是正则表达式

      pattern属性适用于以下类型的input元素:text、search、url、tel、email、password

      [注意]IE9-浏览器及safari浏览器不支持

    <form action="#">    <input pattern="/d{3}">        <input type="submit"></form>

    placeholder

      placeholder属性提供占位符文字,描述输入域所期待的值。占位符会在输入域为空时显示出现,在输入域获得焦点时消失

      placeholder属性适用于以下类型的input元素:text、search、url、tel、email、password

      [注意]IE9-浏览器不支持

    <form action="#">    <input type="tel" placeholder="请输入数字" pattern="/d{11}">        <input type="submit"></form>

    required

      required属性规定必须在提交之前填写输入域(不能为空)

      required属性适用于以下类型的input元素:text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file

      [注意]IE9-浏览器及safari浏览器不支持

    <form action="#">    <input required>        <input type="submit"></form>

    form

      form属性规定输入域所属的一个或多个表单,form属性必须和所属表单的id

      form属性适用于所有input标签的类型,若需要引用一个以上的表单时,用空格分隔

      [注意]IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效

    <form id="form" action="#">    <input type="submit"></form><input name="test" form="form">

    表单重写属性

      表单重写属性允许重写form元素的某些属性设定。其中,formnovalidate适用于button或input元素,而其他属性适用于submit或reset的button或input元素

    formaction

      重写表单的action属性

      关于action的详细信息移步至此

    <form action="#" >First name: <input type="text" name="fname" /><br />Last name: <input type="text" name="lname" /><br /><input type="submit" value="提交" /><br /><input type="submit" formaction="#" value="以管理员身份提交" /></form>

    formenctype

      重写表单的enctype属性

      关于enctype的详细信息移步至此

    <form action="#" method="post">  First name: <input type="text" name="fname" /><br />  <input type="submit" value="提交" />  <input type="submit" formenctype="multipart/form-data" value="以multipart/form-data编码提交" /></form>

    formmethod

      重写表单的method属性

      关于method的详细信息移步至此

    <form action="#" method="get">  First name: <input type="text" name="fname" /><br />  Last name: <input type="text" name="lname" /><br /><input type="submit" value="提交" /><input type="submit" formmethod="post" formaction="#" value="使用POST提交" /></form>

    formnovalidate

      重写表单的novalidate属性

      关于novalidate的详细信息移步至此

    <form action="#" method="get">E-mail: <input type="email" name="userid" /><br /><input type="submit" value="提交" /><br /><input type="submit" formnovalidate="formnovalidate" value="进行没有验证的提交" /></form>

    formtarget

      重写表单的target属性

      关于target的详细信息移步至此

    <form action="#">  First name: <input type="text" name="fname" /><br />  Last name: <input type="text" name="lname" /><br /><input type="submit" value="提交" /><input type="submit" formtarget="_blank" value="提交到新窗口/选项卡" /></form>    







    展开全文
  • input

    2019-09-26 08:24:24
    input标签类型:text【文本框,能使用input自带的正则(pattern),但不推荐使用自带的正则,placeholder是占位符用于友好提示这文本框是做什么用的】 <input type="text" name="uname" id="uname" value="...

    input标签类型:text【文本框,能使用input自带的正则(pattern),但不推荐使用自带的正则,placeholder是占位符用于友好提示这文本框是做什么用的】

    <input type="text" name="uname" id="uname" value="" pattern="[a-z A-Z]{2,8}[0-9]{1-14}" placeholder="请输入用户名" />

     

    input标签类型:password【密码框,输出的内容所有都显示为*号】

    <input type="password" name="pass" id="pass" value="" />

     

    input标签类型:reset【重置按钮,使所有input会到默认,value为按钮提示的内容】

    <input type="reset" name="pass" id="pass" value="重置" />

     

    input标签类型:submit【提交按钮,把数据提交到服务器上面】

    <input type="submit" name="pass" id="pass" value=“提交” />

     

    input标签类型:radio【单选框,name属性必须为一致】

    <label for="wom">
    男:<input type="radio" name="sex" id="wom" value="" />
    </label>
    <label for="man">
    女:<input type="radio" name="sex" id="man" value="" />
    </label>

     

    input标签类型:checkbox【复选框,checked可以指定默认复选框】

    我是c位出道贼牛X的k公主:
    <input type="checkbox" value="唱" checked/>
    <input type="checkbox" value="跳" checked/>
    <input type="checkbox" value="rap" checked/>
    <input type="checkbox" value="篮球" checked/>
    <input type="checkbox" value="来自美国" checked/>

     

    input标签类型:color【RGB颜色的选择器,value能指定选择器的默认颜色】

    <input type="color" value="#FFFFFF" />

     

    input标签类型:file【能指定电脑中的文件。】

    <input type="file">

    file有2个属性分别是:

    multiple【多个文件可以被同时选中. 只要用户所在的平台允许 (摁住 Shift 或者 ctrl), 用户可以选择多个文件】写法如下:

    <input type="file" id="file" name="file" multiple />

    accept【可以指定上传文件的格式。例如指定是.jpg格式就只有jpg图片可见】

    <form action="">
      <label for="file">
        <input type="file" id="file" name="file" accept=".jpg,.jpeg,.png" />
      </label>
    </form>

     

    input标签类型:hidden【允许 Web 开发者存放一些用户不可见、不可改的数据,在用户提交表单时,这些数据会一并发送出。比如,正被请求或编辑的内容的 ID,或是一个唯一的安全令牌。这些隐藏的 <input> 元素在渲染完成的页面中完全不可见,而且没有方法可以使它重新变为可见。】

    <input type="hidden" name="ez" id="ez" value="qwer13214" />

     

    input标签类型:button【是一个没有任何功能的按钮,需要用javascript加上动作才可以使用。功能简单,比起<button></button>是一个功能强大的按钮,更美观。】

    <input type="button" />

    转载于:https://www.cnblogs.com/lllusory/p/11550803.html

    展开全文
  • 总结Input的标签: Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍。1,type=text输入类型是text,这是我们见的最多也是使用...
    总结Input的标签:
    Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍。
    1,type=text
    输入类型是text,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件,家庭住址等等。当然这也是Input的默认类型。
    参数name:同样是表示的该文本输入框名称。
    参数size:输入框的长度大小。
    参数maxlength:输入框中允许输入字符的最大数。
    参数value:输入框中的默认值
    特殊参数readonly:表示该框中只能显示,不能添加修改。
    <form>
      your name:

      <input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30,允许最大字符数为20"><br>
      <input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改">
    </form>
    测试代码:
    <!doctype html>
    <html lang="zh-CN">
      <head>
         <meta charset="utf-8">
         <meta name="description" content="all kinds of input">
         <meta name="keywords" content="input,html">
    
          <title>各种input的测试</title>
    
      </head>
        
      <body>
              <form action="">
                姓名1:<input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30,允许最大字符数为20"><br>
                姓名2:<input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改"><br>
              </form>
      </body>
    </html>
    复制代码
    效果图如下:
    2,type=password
    不用我说,一看就明白的密码输入框,最大的区别就是当在此输入框输入信息时显示为保密字符。
    参数和“type=text”相类似。
    <form>
      //your password:
      <input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15
    </form>
    测试代码如下:
    复制代码
    <!doctype html>
    <html lang="zh-CN">
      <head>
         <meta charset="utf-8">
         <meta name="description" content="all kinds of input">
         <meta name="keywords" content="input,html">
    
          <title>各种input的测试</title>
    
      </head>
        
      <body>
              <form action="">
                密码:<input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15
              </form>
      </body>
    </html>
    复制代码
    效果图如下:



    3,type=file
    当你在BBS上传图片,在EMAIL中上传附件时一定少不了的东西:)
    提供了一个文件目录输入的平台,参数有name,size。
    <form>
      //your file:
      <input type="file" name="yourfile" size="30">
    </form>
    测试代码如下:
    复制代码
    <!doctype html>
    <html lang="zh-CN">
      <head>
         <meta charset="utf-8">
         <meta name="description" content="all kinds of input">
         <meta name="keywords" content="input,html">
    
          <title>各种input的测试</title>
    
      </head>
        
      <body>
              <form action="">
                文件:<input type="file" name="yourfile" size="30">
              </form>
      </body>
    </html>
    复制代码
    效果图如下:
    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>
    测试代码如下:
    复制代码
    <!doctype html>
    <html lang="zh-CN">
      <head>
         <meta charset="utf-8">
         <meta name="description" content="all kinds of input">
         <meta name="keywords" content="input,html">
    
          <title>各种input的测试</title>
    
          <script>
               window.onload = function() {
                   document.getElementById('button').addEventListener('click',function () {
                       alert("隐藏域的值是 "+ document.getElementById('yourhiddeninfo').value);
                   },false);
               }
        </script>
    
      </head>
        
      <body>
              <form action="">
                隐藏:<input type="hidden" name="yourhiddeninfo" id="yourhiddeninfo" value="cnbruce.com">
                <button id="button">显示隐藏内容</button>
              </form>
      </body>
    </html>
    复制代码
    点击获取隐藏内容效果图如下:

    5,type=button
    标准的一windows风格的按钮,当然要让按钮跳转到某个页面上还需要加入写JavaScript代码
    <form name="form1">
      //your button:
      <input type="button" name="yourhiddeninfo" value="Go,Go,Go!" οnclick="window.open('http://www.cnbruce.com')">
    </form>
    测试代码如下:
    复制代码
    <!doctype html>
    <html lang="zh-CN">
      <head>
         <meta charset="utf-8">
         <meta name="description" content="all kinds of input">
         <meta name="keywords" content="input,html">
    
          <title>各种input的测试</title>
    
      </head>
        
      <body>
              <form action="">
                按钮:<input type="button" name="yourhiddeninfo" value="Go,Go,Go!" onclick="window.open('http://www.cnbruce.com')">
              </form>
      </body>
    </html>
    复制代码
    效果图如下:

    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>
    name值可以不一样,但不推荐<br>
    <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>
    测试代码如下:
    复制代码
    <!doctype html>
    <html lang="zh-CN">
      <head>
         <meta charset="utf-8">
         <meta name="description" content="all kinds of input">
         <meta name="keywords" content="input,html">
    
          <title>各种input的测试</title>
    
      </head>
        
      <body>
              <form action="">
                 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>
      </body>
    </html>
    复制代码
    效果图如下:


    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值不同的一个例子,就不能实现多选一的效果了<br>
    <form name="form1">
      a:<input type="radio" name="checkit1" value="a" checked><br>
      b:<input type="radio" name="checkit2" value="b"><br>
      c:<input type="radio" name="checkit3" value="c"><br>
    </form>
    测试代码如下:
    复制代码
    <!doctype html>
    <html lang="zh-CN">
      <head>
         <meta charset="utf-8">
         <meta name="description" content="all kinds of input">
         <meta name="keywords" content="input,html">
    
          <title>各种input的测试</title>
    
      </head>
        
      <body>
              <form action="">
                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>
      </body>
    </html>
    复制代码
    效果图如下:

    8,type=image
    比较另类的一个,自己看看效果吧,可以作为提交式图片
    <form name="form1" action="xxx.asp">
      //your Imgsubmit:
      <input type="image" src="../blog/images/face4.gif">
    </form>
    测试代码如下:
    复制代码
    <!doctype html>
    <html lang="zh-CN">
      <head>
         <meta charset="utf-8">
         <meta name="description" content="all kinds of input">
         <meta name="keywords" content="input,html">
    
          <title>各种input的测试</title>
    
      </head>
        
      <body>
              <form action="">
                <input type="image" src="https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=3466314416,2888444446&fm=73">
              </form>
      </body>
    </html>
    复制代码
    效果图如下:

    9,type=submit and type=reset
    分别是“提交”和“重置”两按钮
    submit主要功能是将Form中所有内容进行提交action页处理,reset则起个快速清空所有填写内容的功能。
    <form name="form1" action="xxx.asp">
      <input type="text" name="yourname">
      <input type="submit" value="提交">
      <input type="reset" value="重置">
    </form>
    测试代码如下:
    复制代码
    <!doctype html>
    <html lang="zh-CN">
      <head>
         <meta charset="utf-8">
         <meta name="description" content="all kinds of input">
         <meta name="keywords" content="input,html">
    
          <title>各种input的测试</title>
    
      </head>
        
      <body>
              <form action="">
                <input type="text" name="yourname">
              <input type="submit" value="提交">
              <input type="reset" value="重置">
              </form>
      </body>
    </html>
    复制代码
    效果图如下:
    展开全文
  • Input的用法

    2019-05-09 10:17:51
    Input的用法 Input Input是Unity中单独的一个类,可以处理键盘的敲击以及鼠标的点击事件 举栗子 (1)获取鼠标的点击 例子: void Update () { if (Input.GetButton ("Fire3")) { print("click"); print...

    Input的用法

    Input
    Input是Unity中单独的一个类,可以处理键盘的敲击以及鼠标的点击事件

    举栗子

    (1)获取鼠标的点击
    例子:
    	void Update () {
    		if (Input.GetButton ("Fire3")) {
    			print("click");
    			print(Input.mousePosition);
    		}
    		if (Input.GetButtonDown ("Fire3")) {
    			print("down");
    		}
    		if (Input.GetButtonUp ("Fire3")) {
    			print("up");
    		}
    	}
      其中Fire1表示左键,Fire2表示右键,Fire3表示鼠标滚轮;  
      Input.mousePosition是一个三维的坐标,用于获取当前鼠标的像素坐标;
    
    (2)用于监听键盘上的按键的状态
    		if (Input.GetKey (KeyCode.A)) {
    			print("A pressed");
    		}
    		if (Input.GetKeyDown (KeyCode.A)) {
    			print("A down");
    		}
    		if (Input.GetKeyUp (KeyCode.A)) {
    			print ("A up");
    		}
    其中GetKey是指定按钮时返回true,GetkeyDown是指定按钮的一帧时返回true,GetKeyUp是按下指定按钮然后抬起的一帧时返回true;
    (3)
    		if (Input.GetMouseButton (0)) {
    			print("0");
    		}
    
    		if (Input.GetMouseButton (1)) {
    			print("1");
    		}
    
    

    GetMouseButton是指定鼠标按键按下时返回true,GetMouseButtonDown是指定按钮的一帧时返回true,GetMouseButtonUp是按下指定按钮然后抬起的一帧时返回true;
    (4)anyKey变量:用来监听当前是否有按键按下,不管什么按键都会触发,若按住键不放则一直触发;
    anyKeyDown:监听当前是否有按键按下,若按键不放只会在按住的时候触发一次,之后不会在触发,直到松开再次按下便能触发;
    if (Input.anyKey) {
    print(“any”);
    }
    (5)inputString:返回键盘在这一帧中输入的字符串,在返回的字符串中只包含有ASCII的字符串
    public string str;
    if (Input.inputString != “”) {
    //str += Input.inputString;
    print(Input.inputString);
    }
    (6)GetAxis方法和GetAxisRaw方法
    两者都是获取虚拟轴的方法
    print(Input.GetAxis("Horizontal”));//范围是 -1~1
    print (Input.GetAxis ("Vertical”));//范围是 -1~1
    如果GetAxis换成GetAxisRaw,则只有-1、0、1;

    展开全文
  • HTML input控件

    2018-04-12 21:41:48
    input控件input 控件是单行输入型控件,用来接受用户输入的信息。可以在 form 元素的开始标签和结束标签之间,添加 input 元素来创建 input 控件。input 元素是一个带有属性的空元素,格式为:&lt;input type=&...

    input控件

    input 控件是单行输入型控件,用来接受用户输入的信息。可以在 form 元素的开始标签和结束标签之间,添加 input 元素来创建 input 控件。input 元素是一个带有属性的空元素,格式为:

    1. <input type="" name="" value="" />

    其中, type 属性用来指定控件的类型;name 属性用来指定控件的名称,服务器端脚本就根据名称来获得文本框中的值;value 属性指定控件的默认值。基本控件类型见表 3‑1。

    表 3‑1 基本输入型控件
    类型说明
    text定义单行文本输入域,用户可在其中输入文本
    hidden定义隐藏的文本域,该文本域不会显示在浏览器上,其信息对用户不可见。如果不希望用户看到某些数据,可以使用该输入类型的文本域
    password定义密码输入域,用户在该域中输入的字符不直接显示,而是显示星号或实心圆
    radio定义单选框,用户只能在多个选项中选择其中一个
    checkbox定义复选框,用户可以在多个选项中选择一个或多个
    file定义输入字段和 "浏览" 按钮,供用户选择文件
    submit定义提交按钮。提交按钮会把表单数据发送到服务器,数据会被发送到在表单的 action 属性中规定的URL
    reset定义重置按钮。重置按钮会把表单中的所有数据置为初始值

    除了上述这些基本的输入型控件,在HTML5中,又新增了很多输入型控件,使控件类型更加丰富。新增的输入型控件类型见表 3‑2。

    表 3‑2 新增的输入型控件
    类型说明
    search定义搜索框,用户可在其中输入任意文本
    tel定义电话号码输入框
    url定义定义URL输入框,用户只能输入合法的URL
    email定义定义email输入框,用户只能输入合法的email
    number定义定义数字输入框,用户只能输入数字
    range定义有取值范围的数字输入框,用户只能在指定的数值范围内进行选择
    color定义颜色选择器控件,用户可以选择颜色
    date pickers定义日期选择框,用户可以根据预定的格式输入日期、时间等

    开发人员不必担心这些控件的兼容性问题,在不支持这些新类型的浏览器中,它们会被优雅降级,退化成普通的单行文本输入框。接下来对这些输入型控件进行简单的介绍。

    text控件

    type=text 定义单行文本输入框,用户可在其中输入文本。如果未显式设置 type 属性,则 input 控件的默认类型就是 text。

    必须为每个文本框设置 name 属性,只有在文本框需要默认值的情况下,才需要设置 value 属性。除此之外,还可以设置其他属性,如required、placeholder 属性等。如:

    1. <label>用户名:</label><input type="text" name="user" placeholder="请输入用户名" />

    运行结果如图 3‑4 所示:

    单行文本框图3-4 单行文本框

    另外,对于文本输入框,包括 text、password、file、search、tel 、url、email,还可以通过 minlength 属性指定最少必须输入的字符数,通过 maxlength 属性指定最多可输入的字符数。

    当用户输入的字符数小于 minlength 属性值,浏览器就会阻止用户提交表单;当用户输入的字符数超过 maxlength 属性值,浏览器就会阻止用户继续输入。

    hidden控件

    type=hidden定义隐藏的文本框,它不会直接显示给用户。在提交表单时,隐藏文本框的信息也会被提交到服务器。因此,通常用它来存储表单先前收集到的信息,并连同当前表单的数据一起发送给服务器,供表单处理程序使用。如:

    1. <input type="hidden" name="country" value="China" />

    尽管用户不会看到这个文本框,但在提交表单时,名称“country”和值“China”会随着表单一起发送给服务器。

    切记,虽然隐藏的文本框不会直接显示在网页中,但不要将密码、信用卡号等敏感信息放到隐藏的文本框中,因为用户仍然可以通过查看HTML源代码看到它。

    password控件

    type=password定义密码输入框。密码框与文本框的唯一区别是,密码框中输入的文本不会直接显示,而是显示为星号或实心圆。如:

    1. <label>密码:</label><input type="password" name="password" />

    运行结果如图 3‑5 所示:

    密码框图3-5 密码框

    事实上,密码框提供的唯一保护措施,就是防止其他人看到用户输入的密码,以星号或实心圆代替而已。在提交表单时,还是以明文的方式,将用户输入的真实值发送到服务器,信息在发送过程中并没有加密。

    radio控件

    type=radio 定义单选框,通过 name 属性定义单选框的名称,通过 value 属性定义单选框的值。

    一个表单上,name 属性值相同的单选框被归为一组,为不同 radio 设定不同的 value 值,通过获取指定 name 的值,就知道哪个按钮被选中了,不用单独判断。

    一组单选框中,最多只能有一个选项被选中。当用户点击一个选项时,该选项被选中,其他选项都会自动变为非选中状态。可以通过 checked 属性,定义默认选中状态。如:

    1. 性别:<input type="radio" name="sex" value="male" checked />男
    2. <input type="radio" name="sex" value="female" />女

    运行结果如图 3‑6 所示:

    单选框图3-6 单选框

    上述代码中,value="male" 的选项定义了 checked 属性,当页面打开时,它默认被选中。当然,它只是默认被选中而已,用户可以通过点击来自由选择其他选项。提交表单时,单选框的名称和被选中的单选框对应的值,将会被提交到服务器端。

    原则上,只能有一个选项定义 checked 属性,但如果多个选项同时定义了 checked 属性,则是最后一个选项被默认选中。

    checkbox控件

    type=checkbox 定义复选框,通过 name 属性定义复选框的名称,通过 value 属性定义复选框的值。

    表单上 name 属性值相同的复选框被归为一组,为不同 checkbox 设定不同的 value 值。提交表单时,每个复选框的名称及复选框对应的值,都会被提交到服务器端。

    一组复选框中,可以有任意多个选项被选中。当用户点击一个选项时,该选项被选中,再次点击时,该选项会取消选中。可以通过checked属性,定义某些选项默认被选中。如:

    1. 爱好:<input type="checkbox" name="hobby" value="music" checked />音乐
    2.      <input type="checkbox" name="hobby" value="swimming" />游泳
    3.      <input type="checkbox" name="hobby" value="football" checked />足球
    4.      <input type="checkbox" name="hobby" value="skating" />轮滑

    运行结果如图 3‑7 所示:

    复选框图3-7 复选框

    file控件

    type=file 定义文件选择框,供用户用户向服务器上传文件(如照片、简历等)。如:

    1. 头像: <input type="file" name="picture" />

    文件选择框在HTML4之前就已经存在,并表现为一个单行文本输入框和一个“浏览…” 按钮。

    文件选择框外观图3-8 文件选择框外观

    在HTML5中,不再有文本输入框,而是一个“选择文件”的按钮。在用户未选择文件时,显示“未选择任何文件”字样,用户选择文件后,在按钮的右侧显示文件的名称。

    选择文件前后图3-9 选择文件前后

    在HTML5中,文件选择框增加了两个属性:一个是 accept 属性,用来指定允许的文件类型,多个MIME类型用英文逗号分开;一个是 multiple属性,表示允许选择多个文件。如:

    1. <label>头像: </label><input type="file" name="picture" accept="image/png" />

    添加 accept 属性后,点击“选择文件”的按钮,在弹出的对话框中,默认的文件类型就是所设置的文件类型。当然,accept 属性只是设置默认的文件类型,它并不是禁止用户选择其他类型的文件。如图 3‑10 所示:

    限制文件类型图3-10 限制文件类型

    从上图可以看出,用户仍然可以将文件类型改为所有文件,来选择任意类型的文件。因此,如果要禁止其他类型的文件,则要在提交表单时进行检查,如果不符合要求,给出相应的提示信息,并拒绝上传。

    添加multiple属性后,点击“选择文件”的按钮后,就可以按住Ctrl键,在弹出的对话框中选择多个文件。如:

    1. 多文件上传: <input type="file" name="picture" multiple />

    选择多文件后,在“选择文件”按钮的右侧显示诸如“4个文件”字样,表示用户选择了4个文件。当鼠标移动到文字上时,浏览器自动显示这4个文件的名称。如图 3‑11 所示:

    显示选择的文件列表图3-11 显示选择的文件列表

    在浏览器的默认方式下,用户选择文件后,只能看见文件的名称,但有时候却希望看到更多的信息,如文件的大小、类型等。

    事实上,当用户选择文件时,浏览器会将文件列表保存在 files 属性中(即FileList对象),同时还会触发 onchange 事件。FileList 对象是 file 对象的列表,file 对象的name、size、type、lastModifiedDate属性,分别用来保存文件的名称、大小、类型、最后修改日期信息。因此,要实现这个功能也不难,只需少量的 Javascript 代码即可。

    首先,为文件选择框注册 onchange 事件,并定义一个显示区域:

    1. <input type="file" onChange="showFiles (this.files)" name="picture" multiple />
    2. <div id="tips"></div>

    然后,在 onchange 事件的处理函数中,遍历FileList 对象,获取每个文件的名称、大小、类型,保存在一个表格中,并在 id="tips" 的区域中显示出来:

    1. function showFiles(files) {
    2.     var strText = "<Table>";
    3.     strText += "<tr><th>文件名称</th><th>文件类型</th><th>文件大小</th></tr>";
    4.     for(var i = 0; i < files.length; i++) {
    5.        strText += "<tr>";
    6.        strText += "<td>" + files[i].name + "</td>";
    7.        strText += "<td>" + files[i].type + "</td>";
    8.        strText += "<td>" + files[i].size + " byte</td>";
    9.        strText += "</tr>";
    10.     }
    11.     strText += "</Table>";
    12.     document.getElementById("tips").innerHTML = strText;
    13. }

    运行结果如图 3‑12 所示:

    显示选择的文件详细信息图3-12 显示选择的文件详细信息

    需要注意的是,要让用户能够上传文件,必须将 form元素的 method 属性设置为 post,并将 enctype 属性设置为 multipart/form-data,enctype 属性可以确保文件采用正确的格式上传。

    除了上述这些基本的输入型控件,在HTML5中,又新增了很多输入型控件。在不支持这些新类型的浏览器中,它们会被优雅降级,成为普通的文本输入框。HTML5新增的输入型控件有:

    search控件

    type=search 定义搜索框,在外观上,它跟普通的文本输入框没什么区别,但是浏览器可能会为搜索自动渲染成圆角。当用户在搜索框中输入文本后,它右边会有一个小×,方便用户清除输入的数据。运行结果如图 3‑13 所示:

    搜索框图3-13 搜索框

    tel控件

    type=tel 定义电话号码输入框。由于国际上没有统一的电话号码格式,因此,电话号码输入框跟普通的文本输入框没什么区别。

    虽然看起来它跟普通的文本输入框没什么区别,但它却有一些很有用的特性,用于帮助验证用户输入的内容。如,使用 pattern 属性来定制验证规则:

    1. <input type="tel" name="tel" placeholder="xxx-xxxxxxxx " pattern="\d{3}-\d{8}" />

    上述代码使用正则表达式,来对用户输入的内容进行限制,对于这个电话输入框,pattern 属性要求“只接受以下格式的输入:xxx-xxxxxxxx,其中x 均为数字”,因为中国的固定电话号码都是这样的格式。

    在提交表单时,现代浏览器会对 tel 框中输入的文本进行检查,确保其符合验证规则的格式。如果格式不合法,会显示警告信息,阻止提交表单,并让该文本框获得焦点,以方便用户修改文本。运行结果如图 3‑14 所示:

    电话号码输入框图3-14 电话号码输入框

    此外,当电话号码输入框获得焦点后,许多触屏设备(如iPhone等),会弹出电话号码键盘方便用户输入,这不仅使输入大为简化,也能防止在移动设备上输入无效字符。

    url控件

    type=url 定义URL输入框,在外观上,它跟普通的文本输入框看上去没什么区别。但是,在提交表单时,现代浏览器会对URL框中输入的文本进行检查,确保其符合URL的格式。如果格式不合法,会显示警告信息,阻止提交表单,并让该文本框获得焦点,以方便用户修改文本。运行结果如图 3‑15 所示:

    URL输入框图3-15 URL输入框

    需要注意的是,www.waibo.wang 并不是有效的URL,因为URL 必须以http:// 或https:// 开头。因此,最好使用占位符提示访问者,或者通过解释文本中给出合法的格式。

    此外,当URL输入框获得焦点后,许多触屏设备(如iPhone等),会根据输入类型改变键盘模式,如键盘上出现Go、斜杠(/)、.com等。

    email控件

    type=email 定义 email 输入框,在外观上,它跟普通的文本输入框看上去没什么区别。但是,在提交表单时,现代浏览器会对 email 框中输入的文本进行检查,确保其符合电子邮件地址的格式。如果格式不合法,会显示警告信息,阻止提交表单,并让该文本框获得焦点,以方便用户修改文本。运行结果如图 3‑16 所示:

    email输入框图3-16 email输入框

    email输入框的一个非常有用的功能是,它能够阻止用户在该字段填入多个 email 地址。 除非你在input标签中设置multiple属性,否则只允许使用一个单一地址:

    1. <input type="email" name="email" id="email" multiple>

    此外,许多触屏设备(如iPhone等),会根据输入类型改变键盘模式,如键盘上出现邮箱地址的@符号等。

    number控件

    type=number 定义数字输入框。默认情况下,对输入的数值没有范围限制,可以通过min 和max属性设定允许输入的最小值和最大值、通过 step 属性设定步长、value属性设置默认值。如:

    1. <label>请输入数字(0~10): </label><input type="number" min=0 max=10 />

    用户可以直接在文本框中输入数字。不过,为了方便输入,当数字输入框获得焦点后,浏览器会为它提供控制按钮,允许用户点击向上或向下箭头来改变文本框中的值。运行结果如图 3‑17 所示:

    数字输入框图3-17 数字输入框

    range控件

    type=range 定义有取值范围的数字输入框,让用户在指定的数值范围内进行选择。默认情况下,其取值范围为0~100,默认值为其中间值50。可以通过设置min、max属性来改变其取值范围,通过设置value属性来改变其默认值。

    range类型控件在浏览器将显示一个滑动条,让用户拖动鼠标来选择某数值,在两个方向移动时,以其步长增大或减小当前值。默认步长为1,可以通过设置step改变其步长。如:

    1. <input type="range" min="60" max="100" value="80" step="5">

    上述数字输入框的取值范围将是 60~100,默认值为80,步长是5。运行结果如图 3‑18所示:

    有范围的数字输入框图3-18 有范围的数字输入框

    有点遗憾的是,浏览器并不显示其取值范围和用户当前选择的值。这样,用户无从得知自己当前选择的值,而人们常常有又想看到取值范围和当前值。

    其实,这个功能实现起来并不难,只需使用 output 控件和简单的Javascript即可实现。output控件是HTML5中专门用来定义不同类型输出的控件。

    首先,在 range 控件后面增加 output 控件。然后,为range元素增加 onChange 事件的处理程序,当 range 的值改变时,就显示在 output 控件中,onChange="output.value = value",就这么简单。需要注意的是,onChange事件中元素的 id 必须与 range 控件的 id相同。代码如下:

    1. <input type="range" min="60" max="100" value="80" step="5" onChange="output.value=value">
    2. <output id="output"></output>

    这样一来,一旦移动滑动条,就会在 output 控件中显示当前选择的值。当然,除显示当前值外,如果能在range控件上显示其取值范围,这样就更人性化了。其实这也很简单,只需要简单的CSS即可实现,代码如下:

    1. input[type=range]:before  {
    2.    content: attr(min);
    3. }
    4. input[type=range]:after  {
    5.    content: attr(max);
    6. }

    这里是通过CSS的属性选择器和伪元素选择器,在 range 控件的前面显示其最小值,后面显示其最大值。运行结果如图 3‑19 所示:

    显示范围和当前值图3-19 显示范围和当前值

    color控件

    type=color 定义颜色选择器控件,相当的给力,使用也很简单。可以通过 name 属性定义控件的名称,通过 value 属性定义控件的默认颜色。如:

    1. 选取颜色:<input type="color" name="user_color" value="#34538b" />

    在Google Chrome浏览器中的运行结果如图 3‑20 所示:

    颜色选择框图3-20 颜色选择框

    在 input 控件有个颜色为 #34538b 的背景,当在控件上点击,则会弹出操作系统自带的颜色拾取器,使用起来非常方便。如图 3‑21 所示:

    颜色拾取器图3-21 颜色拾取器

    date pickers控件

    Date Pickers是HTML5新增的日期选择框,方便用户根据预定的格式输入日期、时间等信息。

    为了方便输入,浏览器会为日期选择框提供控制按钮,允许用户点击向上或向下箭头来改变文本框中的值,当用户输入数据后,在它右边会有一个小×,方便用户清除输入的数据。对于Date类型,浏览器默认还提供一个箭头,供选择日历。如图 3‑22 所示:

    日期选择框图3-22 日期选择框

    Date Pickers有以下几种类型,每种类型有相应的日期格式:

    表 3‑2 Date Pickers类型
    类型说明
    date日期,格式为YYYY-MM-DD。当文本框获取焦点时,显示日历供选择日期
    time24小时制的时间,格式为 HH:MM
    datetimeUTC 时间,格式为YYYY-MM-DDTHH:MM
    datetime-local当地时间,格式为YYYY-MM-DD HH:MM
    month一年中的某个月,格式为YYYY年MM月
    week一年中的某一周,格式为 YYYY年第××周

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》,并全部在 GitHub 上开源。

    版权声明:本文出自 歪脖网 的《HTML宝典》,欢迎在线阅读,并提出宝贵意见。

    展开全文
  • 目标 使用selenium实现自动登录 整理一下思路 ... 出现滑块 --> 滑过滑块 -->...拿到输入框id的过程就不再介绍了,需要注意的点就是'iframe'这个元素,例: ...iframe src="" frameborder="0" id="iframe_id">...
  • 执行自定义的 JS 脚本 Pyppeteer Page 对象提供了一系列 evaluate 方法,你可以通过他们来执行一些自定义的 JS 代码,主要提供了下面三个 API: (1) page.evaluate ( pageFunction [, …args] ) ,返回 pageFunction...
  • Pyppeteer使用笔记

    2019-10-29 11:34:25
    部分内容来自 ... Pyppeteer介绍 如果大家对 Python 爬虫有所了解的话,想必你应该听说过 Selenium 这个库,这实际上是一个自动化测试工具,现在已经被广泛用于网络爬虫中来应对 ...
  • 对于这样的需求我很乐意折腾,我也在网上看了一些大神写的,不用第三方组件,“纯模拟“实现的难度太大了,各种参数,可见淘宝安全机制且高。学艺不精的我,思想太简单我就用简单的方式实现了,目前还有2个问题没...
  • input&gt;标签用法解读OK!今天博主为小伙伴们介绍的内容是HTML5/HTML中&lt;input&gt;标签的用法,,, ,emmm图文并茂哦!喜欢博主的粉我哦,老铁们,点一波关注!下面正式开始内容的介绍:首先,直观...
  • input()函数的简单介绍

    2019-08-22 17:46:51
    1.input()函数 在Python3中,input()函数接受一个标准输入数据,返回为string类型。 注意:在Python3中,raw_input()和input()进行了整合,去除了raw_input(),仅保留了input()函数,其接收任意任性输入。将所有...
  • js实现input的赋值

    2018-03-10 17:36:20
    input框赋值 如下所示,是一个文本框的html代码,实际开发中,要涉及到将数据库中的数据取出然后放入input框中。 &lt;input id="name1" name="teacherName" type="text" /&...
  • input /> 标签是我们日常开发中非常常见的替换元素了,但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性,选择器都没怎么用过,所以就开篇文章来整理一下一些比较有趣或者实用的知识...
  • 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用。首先主页面中将登录的...
  • input[name='keleyicom']") 选择所有的name属性等于'keleyicom'的input元素 $("input[name!='keleyicom']") 选择所有的name属性不等于'keleyicom'的input元素 $("input[name^='keleyi']")....
  • 我们都知道,html5中有个input type=file元素。用该元素可以实现页面上传文件的功能 ...页面上写一个input,然后选俩个图片,打印这个input对象 $("input[name='file1']").change( function(e){ console.log...
  • jquery给input赋值,val的三种用法 val()方法 定义和用法 val() 方法返回或设置被选元素的值。 元素的值是通过 value 属性设置的。该方法大多用于 input 元素。 如果该方法未设置参数,则返回被选元素的当前值。...
  • jquery给input赋值val(val)

    2013-03-22 16:48:44
    jquery给input赋值val(val) val(val)是jquery函数,最容易混淆的是获取input的函数是val(); 区别非常小,一个是带参数,一个是不带参数; $("#user").val(""); 清空ID为user的值; 以下是一段常用的在登录时...
  • js向input的value赋值

    2018-12-04 15:54:29
    js与jquery:在我印象里面都是一样的,今天利用空闲的时间来总结一下,js与jquery究竟有什么区别?  js : 是一门网页的脚本语言 jquery :jquery是基于js的一种框架,也就是说 jquery 就对 js 的一个扩展,...input t...
1 2 3 4 5 ... 20
收藏数 3,080,596
精华内容 1,232,238
关键字:

input