精华内容
下载资源
问答
  • 表单元素事件 (Form Element Events)仅在表单元素中有效。
  • 该文件集齐的HTML5的新增属性和新增表单元素,文档中含有响应的代码演示。
  • 主要介绍了AngularJS实现表单元素值绑定操作,结合具体实例形式分析了AngularJS针对表单元素属性相关操作技巧,需要的朋友可以参考下
  • 在Web开发中,要经常操作表单元素,如input输入框,select下拉选择框,radio单选按钮,checkbox复选框等。这个包含了常用表单元素操作的代码。
  • HTML5 表单元素

    2020-12-13 19:11:57
    HTML5 表单元素 HTML5 新的表单元素 HTML5 有以下新的表单元素: 注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。 HTML5 元素 ...
  • 表单元素如果用js赋值刷新后,记录是js赋值后的值而不是初始值;非表单元素如果用js赋值刷新后,记录的是初始值
  • html表单元素有哪些?

    2021-06-14 03:30:55
    HTML中常用的表单元素包括:文本区域(TEXTAREA),列表框(SELECT),文本输入框(INPUT type=text),密码输入框(INPUT type=password),单选输入框(INPUT type=radio),复选输入框(INPUT type=checkbox),重置按钮、...

    HTML中常用的表单元素包括:文本区域(TEXTAREA),列表框(SELECT),文本输入框(INPUT type=text),密码输入框(INPUT type=password),单选输入框(INPUT type=radio),复选输入框(INPUT type=checkbox),重置按钮、提交按钮、隐藏域、等等。

    一、文本域

    二、密码域

    密码跟文本框类似,但是在里面输入的内容显示为圆点。

    三、单选按钮

    男人: Male

    女人: Female

    四、复选框

    五、按钮

    六、重置按钮

    当点击重置按钮时,重置按钮所在的表单将全部清空,而其他表单不受影响。

    七、提交按钮

    当点击提交按钮时,浏览器将自动提交表单。

    八、隐藏域

    隐藏域在浏览器中并不显示,仅仅为保存一些不太重要的资料而存在。

    九、上传域

    十、图片按钮

    十一、下拉列表

    0

    1

    2

    例如:

    属性:disabled,可选值:disabled ,说明:规定禁用该下拉列表。

    十二、label

    abel 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。例如,当将单选按钮放在label内。则点击label内的文字也会触发单选按钮,而不必只是点中小圆点。

    例如:

    男人

    女人

    十三、禁用(disabled)与只读(readonly)

    禁用和只读属性。readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等。但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去。

    禁用文本框:

    只读文本框:

    十四、TextArea

    十五、fieldset    定义域

    fieldset用于给表单元素分组,legend用于设置分组标题。

    表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签,这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域,包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮,包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

    展开全文
  • 在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现。虽然思路很明确,但由于对bootstrapValidator的用法不熟悉,在这...
  • HTML 表单元素的基本样式

    千次阅读 2018-02-22 17:48:53
    表单元素的样式CSS 表单元素主要包括 label、input、textarea、select、datalist、keygen、progress、meter、output等,以及对表单元素进行分组的 fieldset 和 legend 元素。根据功能的不同,input 元素又包括 text...

    表单元素主要包括 label、input、textarea、select、datalist、keygen、progress、meter、output等,以及对表单元素进行分组的 fieldset 和 legend 元素。

    根据功能的不同,input 元素又包括 text、password、radio、checkbod、file、submit、reset、search、tel、url、email、number、range、color、Date Pickers等类型。

    由于规范只规定了表单元素的功能,并未规定它们的外观。因此,在不同浏览器下,表单元素的外观各不相同。

    为了获得更好的用户体验,在所有浏览器下保持统一的风格,通常需要重新定义表单元素的外观,来覆盖浏览器的默认外观。

    自定义外观时,元素类型不同,需要重新定义的内容也不尽相同。接下来,针对不同的表单元素,进行分别介绍。

    input元素

    在input 元素中,单行文本输入框、文件选择框、单选框和复选框、表单按钮在各浏览器下的外观差别较大,需要专门定义外观,来统一风格。

    1)单行文本输入框

    单行文本输入框,包括text、password、search、tel、url、email、number、Date Pickers,它们的作用是纯粹接受文本,这些文本信息或者由用户手工输入,或者在浏览器的弹出框中选择输入。

    假设在一个用户登录界面上,包含一个 type="text" 和一个 type="password" 的文本输入框,分别用来输入用户名的密码:

    
    
    1. <form id="layer" action="" method="post">
    2. <p><label>用户名: </label><input type="text" name="username" /></p>
    3. <p><label>密&nbsp;&nbsp;码: </label><input type="password" name="password" />
    4. </form>

    在外观上,单行文本输入框就是一个添加了边框的矩形区域,而不同浏览器下的默认尺寸、边框、背景等都不尽相同。如,在Google Chrome下的外观如图 7‑4 所示:

    在chrome下的默认外观图7-4 在chrome下的默认外观

    在IE8下的外观如图 7‑5 所示:

    在IE 8下的默认外观图7-5 在IE 8下的默认外观

    可以看出,不同浏览器下的差别很大,即便是相同浏览器的不同版本(如IE6、IE8),也可能有很大差别。因此,为了能够在所有浏览器下表现相同,需要重新定义框的宽度、高度、字体、文本、边框、背景等,来覆盖浏览器的默认外观。如:

    
    
    1. input[type="text"] ,
    2. input[type="password"]  {
    3.     width: 240px;
    4.     height: 28px;
    5.     color: #333;
    6.     font-size: 14px;
    7.     background: #fff;
    8.     border: 1px solid #cbcbcb;
    9. }

    有时候,为了突显该文本输入框的作用,比如用户登录表单中,在用户名和密码的输入框中,通过背景图像来添加一个小图标,显得更人性化。设置背景图像后,需要为文本框设置相应的左内边距,来为图像腾出空间。

    
    
    1. input[type="text"],
    2. input[type="password"] {
    3.     padding-left: 34px;
    4. }
    5. input[type="text"] {
    6.     background: #fff url(user.gif) 10px center no-repeat;
    7. }
    8. input[type="password"] {
    9.     background: #fff url(pass.gif) 10px center no-repeat;
    10. }

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

    添加图标图7-6 添加图标

    在现代浏览器中,可以通过圆角和内部盒阴影,对文本输入框进行渐进式增强,使它看上去更美观,还能增加一点不错的立体效果。

    
    
    1. input[type="text"],
    2. input[type="password"] {
    3.     border-radius: 4px;
    4.     box-shadow: inset 2px 2px 4px #d9d9d9;
    5. }

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

    添加圆角和内部盒阴影图7-7 添加圆角和内部盒阴影

    如果在文本输入框获得焦点时,通过改变边框颜色,并在文本框的外面,添加一个淡淡的盒阴影,这样既能向用户作出反馈,又能增强用户体验。

    由于大多数现代浏览器中,在文本输入框获得焦点时,都是通过改变文本框的轮廓颜色,来向用户作出反馈。如果不希望如此,可以把 outline 属性设置为 none,关闭此功能。

    
    
    1. input[type="text"]:focus,
    2. input[type="password"]:focus {
    3.     outline: none;
    4.     border: 1px solid #bbb;
    5.     box-shadow: 2px 2px 8px #b8b7b7;
    6. }

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

    添加外部盒阴影图7-8 添加外部盒阴影

    2)文件选择框

    文件选择框与单行文本输入框不同,它有一个按钮,供用户选择文件。在不同的浏览器下,文件选择框的外观差别很大,情况稍微有点复杂。

    在IE下,文件选择框表现为一个文本输入框和一个“浏览…”按钮。在用户未选择文件时,文本输入框的内容为空,用户选择文件后,文本输入框的内容为文件的绝对路径。如,在IE8下的默认外观如图 7‑9 所示:

    文件选择框在IE下效果图7-9 文件选择框在IE下效果

    并且,在IE的不同版本下,文件选择框的外观还稍有差别,IE6和IE7下,文本输入框是灰色背景,而IE8下是白色背景。因此,要在IE下获得一致的表现,就必须设置背景和边框的样式。

    在Google Chrome浏览器下,它只有一个“选择文件”的按钮,而没有文本输入框。在用户未选择文件时,显示“未选择任何文件”字样,用户选择文件后,在按钮的右侧显示文件的名称。如图 7‑10 所示:

    文件选择框在Chrome下效果图7-10 文件选择框在Chrome下效果

    为了在所有浏览器下保持统一的风格,常常需要为一个表单中的文本输入框定义宽度、背景和边框:

    
    
    1. input {
    2.     width: 320px;
    3.     background: #fff;
    4.     border: 1px solid #94B6ED;
    5. }

    当然,上述定义对所有的文本输入框均有效,包括文件选择框。然而,不同的浏览器,对文件选择框应用边框的方式却又不同。

    IE浏览器,会为文本输入框和“浏览…”按钮应用相同的边框样式,互不影响。如图 7‑11 所示:

    应用边框后在IE下效果图7-11 应用边框后在IE下效果

    Google Chrome浏览器,会为“选择文件”按钮和右侧文本同时应用边框,边框出现在“选择文件”按钮和右侧文本的周围。如图 7‑12 所示:

    应用边框后在Chrome下效果图7-12 应用边框后在Chrome下效果

    当然,这个并不是真正想要的效果,我们希望Google Chrome下,仅仅在“选择文件”按钮周围出现边框。

    此时,就可以借助CSS Hack技术中的 '\9',让边框只对IE有效。并使用 webkit 内核专有的 ::-webkit-file-upload-button 伪元素,来设置“选择文件”按钮的样式,使IE和Chrome的按钮风格保持一致:

    
    
    1. input {
    2.     width: 320px;
    3.     background: #fff;
    4.     border: 1px solid #7F9DB9\9;
    5. }
    6. ::-webkit-file-upload-button {
    7.     padding: 4px 14px;
    8.     background: #ECE9D8;
    9.     border: 1px solid #7F9DB9;
    10. }

    经过上述处理后,在Google Chrome浏览器中的运行结果如图 7‑13 所示:

    应用边框后在Chrome下效果图7-13 应用边框后在Chrome下效果

    当然,这里只是提供了一种处理问题的思路,并不代表它就是最佳解决方案,显然这种处理方案只对 webkit 内核的浏览器有效,具有很大的局限性。

    既然上述解决方案有很大的局限性,能否换一种思路,设计一个文件选择框,让它在任何浏览器下的表现完全一致呢?

    答案是肯定的。既然大家已经习惯了IE的文件选择框,就可以在表单上包含一个文本框、一个 "浏览..." 按钮和一个文件框,通过文本框和 "浏览..." 按钮,来模拟文件框的外观,而文件框的功能保持不变,只是被隐藏起来了:

    
    
    1. <form action="" method="post" enctype="multipart/form-data">
    2.     <input type="text" id="text" />
    3.     <input type="button" value="浏览..." />
    4.     <input type="file" id="file" />
    5. </form>

    首先,设置文本框和按钮的样式,来模仿文件框的外观,主要是设置其宽度和高度。为了兼容IE6和IE7,还需要设置背景和边框样式:

    
    
    1. input[type="text"]{
    2.     width: 180px;
    3.     height: 24px;
    4.     line-height: 24px;
    5.     background: #fff;
    6.     border: 1px solid #94B6ED;
    7. }
    8. input[type="button"]{
    9.     width: 70px;
    10.     height: 26px;
    11.     background: #ECE9D8;
    12.     border: 1px solid #94B6ED;
    13. }

    然后,让文件选择框使用绝对定位(先要把 form 设置为相对定位),并控制它的尺寸,让它正好覆盖文本框和按钮,还要保证按两个钮正好对齐。再通过透明度,来隐藏文件选择框。这样,用户点击按钮或文本框(现代浏览器下),就等价于点击文件选择框,可以做到以假乱真了。

    
    
    1. form {
    2. position: relative;
    3. }
    4. input[type="file"]{
    5. top: 0;
    6. left: 0;
    7. position: absolute;
    8. width: 260px;
    9. height: 26px;
    10. filter: alpha(opacity:0);
    11. opacity: 0;
    12. }

    使用这种技术设计出来的文件选择框,在任何浏览器下的外观都完全一致。如图 7‑14 所示:

    应用边框后在Chrome下效果图7-14 应用边框后在Chrome下效果

    不过,由于文件框被隐藏,在用户选择文件后,就不能清楚看到自己的选择。其实这也不难,只需少量的 Javascript 代码就可以实现。

    当用户选择文件后,就会触发文件选择框的 onchange 事件,只需在该事件的处理函数中进行相应的处理即可。

    如果是单文件选择框,就非常简单,由于它只能选择一个文件,只需根据 id 获取文件框的值,并将它显示在文本框中即可:

    
    
    1. <input type="file" onChange="text.value = this.value" />

    在HTML5中,为文件选择框新增了 multiple 属性,支持选择多文件。如果是多文件选择框,可以通过一个函数,来遍历文件框的值,并显示在文本框中:

    
    
    1. <input type="file" onChange="text.value = getFiles(this.files)" multiple />

    对于多文件选择框,当用户选择文件后,会将文件保存在 FileList 对象中,它是一个文件的列表,通过遍历该列表,就可以得到每个文件的信息。

    
    
    1. function getFiles(files) {
    2.     var strText = "";
    3.     for(var i = 0; i < files.length; i++) {
    4.         strText += files[i].name + ", ";
    5.     }
    6. return strText;
    7. }

    上述函数中,通过遍历 FileList 对象,通过 name 属性得到每个文件的名称,并把它们用逗号连接起来。于是,用户选择文件后,文本框中就会显示用户所选择的文件列表。如图 7‑15 所示:

    显示选择的文件列表图7-15 显示选择的文件列表

    如果需要,还可以获取文件的大小(size)、类型(type)、最后修改日期(lastModifiedDate)等信息。

    3)单选框和复选框

    单选框和复选框本身很简单,但有一个问题,就是默认情况下,在所有的浏览器中,单选框和复选框都无法与旁边的文本对齐。如图 7‑16 所示:

    单选框和复选框与文本未对齐图7-16 单选框和复选框与文本未对齐

    导致这个问题的原因很复杂,限于篇幅,这里不进行深究,只给出解决方案。其实,这个问题的解决方案也很多,一个比较简单的解决方案,就是让单选框和复选框垂直居中对齐,再设置 -2px 的上外边距和 1px 的下外边距:

    
    
    1. input[type="radio"],
    2. input[type="checkbox"]  {
    3.     vertical-align: middle;
    4.     margin-top: -2px;
    5.     margin-bottom: 1px;
    6. }

    经过上述处理之后,选择框与文本已经对齐,并且,在所有的浏览器中的表现基本相同。在IE下运行结果如图 7‑17 所示:

    单选框和复选框与文本对齐图7-17 单选框和复选框与文本对齐

    select元素

    在表单元素中,下拉列表是最令人头疼的一个元素,因为它的外观非常丑陋,而许多样式对它又不生效。如,字体、文本颜色、边框、背景颜色等,都很容易进行美化处理。但是,任凭怎么美化,默认的下拉箭头始终保持不变,无法直接进行处理。

    这个问题有多种解决方案,相对简单的解决方案是,用一个容器来包裹 select 元素。再为容器应用样式,来模拟下拉列表的样式。

    在实际应用中,可以根据上下文需要来选择包裹 select 元素的容器。如果希望 select 元素独占一行,就用块级容器进行包裹;否则,就用行内级容器来包裹。这里以块级容器 div 为例进行说明:

    
    
    1. <div class="select">
    2. <select>
    3.     <option value="1">北京</option>
    4.     <option value="2">上海</option>
    5. </select>
    6. </div>

    首先,设置容器的尺寸,再指定一个自定义的下拉箭头,作为容器的背景,并让它出现在预想的位置,以便能够遮盖 select 元素的默认下拉箭头。如果希望 select 元素在行内显示,还需要设置 display 属性。

    
    
    1. .select {
    2.     width: 240px;
    3.     height: 34px;
    4.     overflow: hidden;
    5.     background: #fff url(arrow_down.png) 220px center no-repeat;
    6. }

    然后,通过 appearance 属性清除 select 元素的默认样式,并让背景透明,这是本方案的核心,也是最关键的一步。

    再根据需要,设置 select 元素的尺寸、内边界、字体、背景、边框等属性。使用百分比设置尺寸的好处是,在修改容器尺寸时,不必修改 select 元素的样式,让布局更灵活、更独立,可以提高代码的可维护性。

    
    
    1. .select  select {
    2.     width: 100%;
    3.     height: 100%;
    4.     padding: 5px;
    5.     font-size: 14px;
    6.     background: transparent;
    7.     border: 1px solid #94B6ED;
    8.     -moz-appearance: none;
    9.     -webkit-appearance: none;
    10. }

    经过上述处理后,下拉列表的运行效果如图 7‑18 所示:

    下拉列表箭头效果图7-18 下拉列表箭头效果

    当然,可以更进一步美化,当用户执行点击操作后,将向下的箭头动态改变为向上的箭头,使下拉列表更加人性化。这个功能只需简单的jQuery即可实现。

    首先,定义一个类,它让容器使用向上的箭头作为背景图像。

    
    
    1. .selected {
    2.    background-image: url(arrow_up.png);
    3. }

    然后,当jQuery检测到用户执行点击操作后,为容器添加 .selected 类,来改变箭头的方向。点击操作既可以由容器触发,也可以由下拉列表触发,根据实际情况进行选择。

    
    
    1. $(function() {
    2.     $(".select").click(function() {
    3.        $(".select").addClass("selected");
    4.     });
    5. });

    上述这种直接书写代码的方式确实很方便,但它不利于代码的重用。如果把这个点击操作封装为一个函数,再为容器绑定单击事件的处理函数 οnclick="changArrow()" ,可以大大提高代码的重用性。

    
    
    1. function changArrow() {
    2.     $(".select").addClass("selected");
    3. }

    而当鼠标移出容器时,需要删除 .selected 类,来恢复箭头的方向。同理,需要为容器绑定鼠标移出事件的处理函数

    
    
    1. onmouseout="removeArrow()"
    2. function removeArrow() {
    3.     $(".select").removeClass("selected");
    4. }

    现在,下拉列表趋于完美了,用户点击后,会自动把向下的箭头改为向上的箭头,当鼠标移出时,再恢复箭头的方向。运行结果如图 7‑19 所示:

    改变下拉列表箭头图7-19 改变下拉列表箭头

    表单按钮

    默认的按钮非常丑陋,并且不同浏览器下的外观又不尽相同。如果使用图像按钮,还需要向服务器请求图像,会增加服务器的额外负担。因此,使用原生的表单按钮,再使用纯CSS进行美化,才是最佳的选择。

    HTML中,共有三类表单按钮,分别是提交按钮、重置按钮和普通按钮,无论哪种按钮,美化方法完全相同。

    其实非常简单,首先设置按钮文本的颜色、字体,在通过 padding 属性文本在按钮中的位置,再根据上下文的风格,设置按钮的背景颜色。为了让按钮有一点立体感,可以增加一个边框,让边框跟背景使用相同色系,但颜色稍深一点:

    
    
    1. input[type="submit"] { 
    2.     color: #fef4e9;
    3.     font-size: 16px;
    4.     font-family: "Microsoft YaHei";
    5.     padding: .4em 2em .45em;
    6.     background: #f78d1d;
    7.     border: 1px solid #da7c0c;
    8. }

    当鼠标悬停到按钮上时,通过改变背景颜色,来提醒用户:

    
    
    1. input[type="submit"]:hover {
    2.     background: #f47c20;
    3. }

    上述按钮可以适应于所有的浏览器,并在所有浏览器下的表现完全相同。为了在现代浏览器下表现得更好,可以通过圆角、文本阴影,对按钮进行渐进式增强,并通过盒阴影和渐变背景,让按钮的立体感更加逼真:

    
    
    1. input[type="submit"] { 
    2.    
    3.     border-radius: 4px;
    4.     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    5.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    6.     background: linear-gradient(180deg, #faa51a, #f47a20);
    7. }

    在Chrome浏览器下的运行效果如图 7‑20 所示:

    表单按钮图7-20 表单按钮

    关于作者

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

    展开全文
  • 大家好,我是IT修真院北京分院第23期...表单元素是页面中不可缺少的元素,在最新的H5中,表单元素也新增了一些属性,在页面构建中发挥了重要的作用。一般来说,表单包含如下几个部分:1. 提示信息:表单中包含的说...

    大家好,我是IT修真院北京分院第23期学员。今天小课堂的主要内容是,input表单的应用,还有在html5中新增的属性。

    表单元素是允许用户在表单中(比如:文本域,下拉列表,单选框,复选框等等)输入信息的元素,最主要的作用就是收集信息。表单元素是页面中不可缺少的元素,在最新的H5中,表单元素也新增了一些属性,在页面构建中发挥了重要的作用。一般来说,表单包含如下几个部分:

    1. 提示信息:表单中包含的说明性文字

    2. 表单控件:包含了具体的表单功能项

    3. 表单域:容纳所有表单控件和提示信息

    常用的表单元素,包括:

    1. form: 定义供用户输入的表单。

    2. fieldset: 定义域。即输入区加有文字的边框。

    3. legend:定义域的标题,即边框上的文字。

    4. label:定义一个控制的标签。如输入框前的文字,用以关联用户的选择。

    5. input: 定义输入域,常用。可设置type属性,从而具有不同功能。

    6. textarea: 定义文本域(一个多行的输入控件),默认可通过鼠标拖动调整大小。

    7. button: 定义一个按钮。

    8. select: 定义一个选择列表,即下拉列表。

    9. option: 定义下拉列表中的选项。

    接下来是对这些表单元素的具体分析。

    ……

    name : 表单名称;action : 用来指定表单处理程序的位置(url);method : 定义表单结果从浏览器传送到服务器的方式,默认为"get"(也可以是post)

    name:控件名称;value:input控件默认文本值;size:input控件在页面中的显示宽度(必须是正整数)

    input常用type属性如下:

    1. text:单行文本输入框,可以通过正整数的size控制框长度。

    2. password:密码输入框。

    3. radio:单选按钮,同一组的单选按钮必须要有相同的name。

    4. checkbox:复选框,同一组的单选按钮必须要有相同的name。

    5. button:普通按钮。

    6. submit:提交按钮,每出现一次,一个 Submit 对象就会被创建。

    7. reset:重置按钮,会重置当前表单中全部的内容。

    8. image:图像形式的提交按钮,写法是“”。

    9. hidden:隐藏域,隐藏字段对于用户是不可见的。

    10. file:文件域,用于文件上传。

    选项1

    ……

    size:下拉菜单的可见选项数;multiple:多选。

    在最新的html5中,有一些表单的新增属性,多用于js,如

    datalist : 定义填写一个input时,提示几个option用于提示。可通过input的list特性与此元素作关联。

    output : 表示计算的结果。可通过for特性与其它能够影响运算的元素(如input)作关联。

    还有一些新增的type属性:

    1. search:input会呈现为搜索框(与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容)。

    2. tel:编辑电话号码的控件,提交时换行符会自动从输入框中去掉。

    3. url:编辑url的控件,提交时换行符与首位的空格都将自动去除。

    4. email:可输入一个邮件地址。

    5. color : 选择颜色的控件。

    6. date : 选择年月日的控件。

    此外,还有time、datetime、datetime-local、month、week、number、range类型。

    html5中input新增的一些较常用的特性:

    1. list:关联datalist所用的该datalist的id(即datalistform外建立,通过list关联即可)。

    2. pattern:一个正则表达式,用于检查控件的值,可作用于text、search、tel、url、email类型的input。

    3. form:一个字符串(为关联的form表单的id),用于表明该input属于哪个form表单(作用类似list)。

    4. formmethod:表明使用GET还是POST,能覆盖form表单的method。仅在type为image或submit,且上面的form特性被设置的情况下才能使用。相似的有formtarget特性。

    5. readonly:一个boolean值,表明该input值是否能被用户修改,可用于信息展示等页面。作用于type为hidden、range、color、checkbox、radio、file、button的input将被忽略。

    6. maxlength:type为text、emal、search、password、tel或url(都为文本)时允许输入的最大字符个数。

    7. autocomplete:浏览器是否根据之前提交的输入情况对此input自动填值(即以option形式匹配之前的输入值),取值on或off,默认on。如在登陆页面不想显示上一个登陆的用户名等时,可设置为off。

    参考文献

    1. html元素-表单元素及实用属性:http://blog.csdn.net/qq_19865749/article/details/52490882" target="_blank"

    2. W3School HTML 表单 : http://www.w3school.com.cn/html/html_forms.asp" target="_blank"

    3. HTML5-input元素新特性 :http://blog.csdn.net/garvisjack/article/details/63683201#Menu3-date

    相关ppt见:https://ptteng.github.io/PPT/PPT/css-04-%E8%A1%A8%E5%8D%95.html#/

    腾讯视频:https://v.qq.com/x/page/o05246f2ah7.html

    问题整理

    1. 使用input上传文件或图片应该怎么办

    涉及到angularjs,可参考插件https://github.com/nervgh/angular-file-upload

    2. input为什么不使用闭合标签

    input为自闭和标签,详见W3C标准

    3. type="number"在输入框右侧有上下箭头可以加减数字,怎么去掉箭头?

    使用type="tel"时没有右侧上下箭头。

    展开全文
  • 表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交。可以使用elemForm.submit();方法触发表单提交。1、表单元素中出现了name=”submit”的元素这种情况下elemForm.submit();将不会触发表单提交...
  • CSS-01 ...(1)表单元素 (2)表单控件 表单就是从浏览器向服务器传输数据的手段 表单元素: 用来声明数据提交的范围,只有在此元素内的数据可以提交给服务器。 定义表单:使用成对的<form>&l

    HTML表单元素、表单控件

    HTML工作原理

    HTML是部署在服务器上的文本文件根据HTTP协议,浏览器发出请求给服务器,服务器做出响应,给浏览器返回一个HTML浏览器解释执行HTML,从而显示出内容
    HTML部署在服务器上,运行在浏览器上

    表单

    表单用于显示、收集信息,并提交信息到服务器
    表单二要素:

    • (1)表单元素
    • (2)表单控件——<input>元素中的,各个type属性值
    表单元素表单控件
    inputtext——文本框
    label——管理表单中的文本password——密码框
    select——下拉选radio——单选按钮
    textarea——文本域checkbox——多选按钮
    -hidden——隐藏文本域
    -file——文件上传组件
    -submit——提交按钮
    -reset——重置按钮
    -button——普通按钮
    新增表单控件
    email
    url
    search——此类型表示输入的将是一个搜索关键字
    number / range——不同的数字输入模式
    color——让用户通过颜色选择器选择一个颜色值,并反馈到value中
    date——日期和时间选择器

    表单就是从浏览器向服务器传输数据的手段

    • 定义表单:使用成对的<form></form>标记,表示要将此元素中所涵盖的控件中的数据传输给服务器

    • 主要属性:
      (1)action:表单提交的URL
      (2)method:指出表单数据提交的方式
      (3)enctype:表单数据进行编码的方式

    input元素 :他们之间用type属性区分。

    • 1、文本框:<input type="text"/>
    • 2、密码框:<input type="password"/>
      主要属性:
      (a)value属性:由访问者自由输入的任何文本
      (b)maxlength属性:限制输入的字符数
      (c)readonly属性:设置文本控件只读
      (d)name属性:当提交form时,name作为元素标识被发送到服务器
    • 3、单选框:<input type="radio"/>
    • 4、复选框:<input type="checkbox"/>
      主要属性
      (a)value:文本,当提交form时,如果选中了此按钮,那么value就被发送到服务器
      (b)name:用于实现分组,一组单选框或者复选框的名称必须相同
      (c)checked:设置选中
      (d)id:元素的唯一标识,相当于元素的身份证号。任何元素都可以有id,程序员有义务保障元素的id不重复。id属性与<label></label>标签配合,可用于使选项后的文字可被点击来选中选项。
      在这里插入图片描述
      效果:
      在这里插入图片描述
    • 5、隐藏域:<input type="hidden"/>
      在表单中包含不希望用户看见的信息
    • 6、文件选择框:<input type="file"/>
      选择要上传的文件
      在这里插入图片描述
      在这里插入图片描述
    • 7、提交按钮:<input type="submit"/>
      传送表单数据给服务器端或其它程序处理
    • 8、重置按钮:<input type="reset"/>
      清空表单的内容并把所有表单控件设置为最初的默认值
    • 9、普通按钮:<input type="button"/>
      用于执行客户端脚本,没有任何功能,需通过js定义功能。
      主要属性:
      value:按钮的名字

    其他元素(3个);

    1、<label> 用来管理表单中的文本,可以将文本与控件绑定在一起,从而增加了控件的受力面积。
    语法:<label for="控件ID">文本</label>
    主要属性:

    • for:设置该文本所关联的控件ID,关联后点击标签等同于点
      击控件

    id:元素的唯一标识,相当于元素的身份证号。任何元素都可以有id,程序员有义务保障元素的id不重复。
    在这里插入图片描述
    在这里插入图片描述

    • 2、<select> 下拉选
      selected:默认选中
      在这里插入图片描述
      在这里插入图片描述
    • 3、<textarea>:文本域
      相当于多行文本框
      语法:
      <textarea>文本</textarea>
      主要属性:
      cols:指定文本区域的列数
      rows:指定文本区域的行数
      readonly:只读
      在这里插入图片描述
      在这里插入图片描述
    展开全文
  • H5新增表单元素、控件

    千次阅读 2019-09-24 18:51:43
    表单—新增控件类型 • HTML5 增加了多个新的表单输入类型,这些新特性提供了更好的输入控制和验证,主要内容如下。 • ①email、②url、③number、④range • ⑤Date pickers (date, month, week, time, datetime, ...
  • vue动态生成表单元素

    千次阅读 2018-11-15 14:44:57
    根据选择方式展示不同的表单元素 如果从编辑页进入该页面有数据的话,进行数据回填 样式同第三点相似,这里不再说明 思路: 请输入标题,请选择类型 为父组件;请选择方式 为子组件;根据请选择方式出来的内容...
  • HTML5 新的表单元素 HTML5 有以下新的表单元素:  <keygen>  注意:不是所有的浏览器都支持HTML5 新的表单元素,但是你可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。 ...
  • 主要介绍了jQuery表单元素过滤选择器用法,结合实例形式分析了jQuery表单元素过滤选择器针对表单元素匹配相关操作技巧,需要的朋友可以参考下
  • 我们在提交表单时,有时会遇到需要重复添加多个相同表单元素,如订单信息中需要添加多个不同型号的产品、表单数据中新增字段信息等。这个时候我们可以在表单中直接放置一个“新增一项”或“复制”按钮,通过点击按钮...
  • 如果表单元素不多的情况我们常常会通过GET方式来获取表单元素值,但如果表单元素非常多,此时就需要用POST方式来获取表单元素值,那么如何来获取表单元素值呢?下面给出一段JS代码即可自动获取表单元素的值了。 ...
  • HTML5-表单元素(Form-input元素)

    千次阅读 2019-04-24 17:01:48
    表单元素 表单:是HTML中获取用户输入的手段,对于web应用系统极其重要,但是HTML定义的功能落后于表单的使用方式已经有很多年了。 HTML5中,整个表单已经彻底改造过,标准的步伐已经跟上表单的应用实践。 (比如...
  • 语法:表单元素dom对象.validity.属性 验证状态: 1)valid 语法:form表单元素对象.validity.valid; valid属性是一个bool值,它表示表单元素是否通过验证,如果通过,则为true,否则为false 2)valueMissing 当...
  • 获取提交的表单元素的值,java web 表单 值.
  • HTML 5新增表单元素(案例详解)

    千次阅读 2019-04-09 15:35:58
    datalist元素定义输入框的选项列表,选项列表是通过该元素内的option元素进行创建的。 该元素与input元素配合使用,来定义input可能的值。 要把这个datalist元素定义的选项列表绑定到输入框,将input元素的list属性...
  • function resetForm() { $(':input', '#page_form') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); }
  • selenium操作表单元素

    千次阅读 2019-01-02 11:13:01
    操作表单元素 1、操作输入框:分为两出,解一步:找到这个元素,解二步:使用 send_key(value),将数据填充进去,示例代码知下 inputTag = driver.find_element_by_id('kw') inputTag.send_keys('python') 使用clear...
  • 比如在一个表单元素中 我们可以通过手写函数,清空某种元素的值,以上是我的个人总结,高手就绕过。
  • 在 HTML 中,一个完整的表单通常由表单控件(表单元素)、提示信息和表单域三部分构成 表单控件 包含了具体的表单功能项,例如:单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等 提示信息 一个表单中通常...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 323,188
精华内容 129,275
关键字:

表单元素

友情链接: java版后台.rar