精华内容
下载资源
问答
  • 一个文本框一个按钮HTML的两个不同的页面
    2021-06-11 01:27:57

    的问题看起来是您使用的getElementById但输入的元素没有一个ID(他们只有一个名字)。

    我还建议附加一个onSubmit事件到窗体并从按钮中删除onClick事件。

    编辑:仔细查看代码后,我看到有一些其他问题可能会妨碍操作。最值得注意的是你不能嵌套窗体标签。还有一些其他的CSS和验证问题。

    下面是一些工作代码:

    测试页

    function SubmitForm(el) {

    // Get the form element so that we can set the action later

    var form = document.getElementById('theForm');

    // Set the action for the form based on which button was clicked

    if (el.id == "A")

    form.action = "a.php";

    if (el.id == "B")

    form.action = "b.php";

    // You dont need to submit the form. It's alreasdy happening, so there is no need for an explicit call.

    }

    Enter Text:

    更多相关内容
  • 表单代码如图,还没有加入样式表,表单没有对齐,比较难看,但是HTML又没有提供表单对齐的标签或功能。 html源代码: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <...
  • jQuery提供了val()方法,使用它我们可以快速地获取和设置表单文本框、单选按钮、以及单选按钮的值。使用val()不带参数,表示获取元素的值使用val()给定参数,则表示把值赋给元素 如下: 代码如下://获取值alert&#...
  • 大家好,我是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"时没有右侧上下箭头。

    展开全文
  • HTML表单和输入文本框

    千次阅读 2021-06-08 17:08:46
    1)例子文本域这个例子演示了如何在一个 HTML 页创建文本域。用户可以文本域输入文本。密码框这个例子演示了如何 HTML 页创建密码输入框。(本文后面提供更多的例子)2)表单表单是包含表单内各个元素表单域...

    5268f80b9b1e01f982625ef6fac83ca1.png

    HTML 表单用于收集用户输入的各类信息。

    1)例子

    文本域

    这个例子演示了如何在一个 HTML 页中创建文本域。用户可以在文本域中输入文本。

    密码框

    这个例子演示了如何在 HTML 页中创建密码输入框。

    (本文后面提供更多的例子)

    2)表单

    表单是包含表单内各个元素的表单域。

    表单域内的表单元素允许用户输入相关信息(如文本输入框、文本区域、下拉列表、单选按钮、复选按钮,等等)。

    表单由标记

    定义。

    3)输入

    表单中最常用的标记为输入标记 。输入的类型由属性 type 指定。最常用的输入类型有下面几种(4~6所示)。

    4)文本域

    当用户需要在表单中输入字母、数字,等内容时,需要使用文本域。

    First name:

    Last name:

    上述代码执行结果:

    注意到:表单本身不显示,并且在大多数浏览器中,文本域的默认可输入字符数为20。

    5)单选按钮

    单选按钮用于向用户提供在有限选项内选择一项的交互入口。

    value="male">Male

    value="female">Female

    上述代码执行结果:

    注意,只能选择其中的一个选项。

    6)复选框

    复选框用于向用户提供在有限选项内选择若干项的交互入口。

    I have a bike:

    name="vehicle"

    value="Bike" />

    I have a car:

    name="vehicle"

    value="Car" />

    I have an airplane:

    name="vehicle"

    value="Airplane"/>

    上述代码执行结果:

    7)表单的 Action 属性和提交表单按钮(Submit Button)

    当用户单击表单中的提交表单按钮("Submit")时,表单中的内容就会被发送到另一个文件(该文件通常是一个脚本)进行相应处理。表单的 action 属性就是定义了由哪个脚本文件进行处理表单所提交的内容(一般把该脚本文件的名字或者完整路径赋值给 action 属性即可)。脚本文件通常会处理表单提交上来的数据信息。

    action="html_form_action.asp"

    method="get">

    Username:

    上述代码执行结果:

    如果你在上面的文本输入框中输入一些内容,然后单击提交按钮("Submit"),你将会把你输入的信息提交到一个叫 "html_form_action.asp" 的页面(这是个脚本),此脚本文件将向你输出收集到的信息。

    {

    注意到这里会生成一个报告出错的页面,因为这里的脚本文件:“html_form_action.asp”不是新浪博客系统里面的文件,这里只是演示用。在你的网站中,你必须指定你自己的脚本文件。

    }

    8)更多例子

    复选框

    这个例子演示了如何在一个 HTML 页中创建复选框。对于复选框的各项,用户可以勾选也可以不勾选。

    单选按钮

    这个例子演示了如何在一个 HTML 页中创建单选按钮。

    下拉列表框

    这个例子演示了如何在一个 HTML 页中创建一个简单的下拉列表框。下拉列表框实际是一个提供可选项的列表框。

    指定某一选项为当前选项的下拉列表框

    这个例子演示了如何创建一个指定当前选定项的下拉列表。

    文件区域

    这个例子演示了如何创建一个文本区域(多行文本输入控制)。用户可以向文本区域输入文本,并且输入的字符数没有限制。

    创建一个按钮

    这个例子演示了如何创建一个按钮,并且自己定义按钮上的描述文字。

    数据集

    这个例子演示了如何创建一个性质相同的数据集,所有数据用一边框包围起来。

    9)表单类范例

    带文本输入字段和提交按钮的表单

    这个例子演示了如何向一个 HTML 页中添加表单,表单中包括文本输入字段和提交按钮。

    带复选框的表单

    这个例子演示了一个包含两个复选框和一个提交按钮的表单。

    带单选按钮的表单

    这个例子演示了一个包含两个单选按钮和一个提交按钮的表单。

    通过表单发送邮件

    这个例子演示了如何通过表单发送邮件。

    10)表单相关标记

    标记

    说明

    定义用户输入表单

    定义输入字段

    定义文件区域(多行文本输入控制)

    定义标签

    定义字段集

    定义字段集说明

    定义一个(下拉)列表框的当前选项

    (下拉列表框中)选项的隶属目录

    (下拉列表框中)选项的提示文本

    定义提交按钮

    已被禁止,使用 标记代替

    以上就是HTML表单和输入文本框的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!

    1428d0e076c3959ab11d28a39bc84fab.png

    5268f80b9b1e01f982625ef6fac83ca1.png

    本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

    本文系统来源:php中文网

    展开全文
  • 输入框无法获得焦点,不能编辑 表单可以获得值。 可以复制。 蛮奇怪的,都选住了,还没有获得焦点? 2,readonly 代码: <input type=”text” value=”fisker” onclick=”alert(this.value);” ...
  • HTML如何使多个表单中文本框对齐

    千次阅读 2021-03-21 15:29:49
    HTML如何使多个表单中文本框对齐 ** 一般设置表单元素格式: <label for="">表单文本</label> //文本框 <input type="text" name="" id=""> 但是经常出现这样的问题,文本框无法对齐,使得不...

    **

    HTML如何使多个表单中的文本框对齐

    **
    一般设置表单元素格式:

    <label for="">表单文本</label>
    //文本框
    <input type="text" name="" id="">
    

    但是经常出现这样的问题,文本框无法对齐,使得不美观
    在这里插入图片描述
    解决办法:通过设置label来达到使文本框对齐的效果
    给label标签设置一定的宽度,但是由于label是行内元素,所以display设位行内块级元素,接着用text-align设置是左对齐还是右对齐

    1. 右对齐的效果:
     label {
            width: 100px;
            text-align: right;
            display: inline-block;
        }
    

    在这里插入图片描述

    2.左对齐的效果:

    label {
            width: 70px;
            text-align: left;
            display: inline-block;
        }
    

    在这里插入图片描述

    展开全文
  • html表单元素有哪些?

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

    2021-06-12 01:06:59
    A、表单元素都是放在标签内的。来看看表单的属性属性 值 描述accept MIME_type 规定通过文件上传来提交的文件的类型accept-charset charset 服务器处理表单数据所接受的字符集enctype MIME_type 规定表单...
  • 新增的表单元素与属性新增属性form属性HTML5中表单元素可放在表单之外,通过给该元素添加form属性即可,如:代码如下username:url:点击提交即可看到url:代码如下?username=oseye&button=提交&url=...
  • 本篇文章小编给大家分享一下HTML对齐多个表单中文本框实现代码示例,代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,需要的小伙伴们可以来看看。表单代码如图,还没有加入样式表,表单没有对齐...
  • 主要介绍了jQuery实现动态表单验证时文本框抖动效果,可实现表单元素左右晃动的抖动功能,涉及jquery中元素的匹配与动画animate效果实现技巧,需要的朋友可以参考下
  • jQuery获取文本框的值方法:首先新建文件,并使用script标签当前...推荐:《jquery视频教程》jQuery获取文本框的值方法:1、新建一个html文件,命名为test.html,用于讲解怎样用jquery得到文本框的值。2、t...
  • Flash版网页表单元素文本框、单选框、滚动条等),内含源文件,还包括日历,Select下拉框、浮动窗口、树形菜单等元素组件,已经做也了现成的,用起来十分方便,用于Flash实现上述元素的外观和功能。
  • – text()、html() 以及 val()我们将使用前的三相同的方法来设置内容:text() – 设置或返回所选元素的文本内容html() – 设置或返回所选元素的内容(包括 HTML标记)val() – 设置或返回表单字段的值 ...
  • 如果这HTM文件,包含文本输入框这样的一些表单元素IE6下就会出娄子了。 测试组的人说了,弹出层打开后,“经常”无法获取文本框的焦点,就是鼠标点文本框无法获取焦点并显示输入标记,仿佛被什么透明层给盖...
  • 表单标签:属性文本框和密码框、单选按钮和复选框
  • 表单用来收集用户信息,HTML一个完整的表单通常是由表单域、表单控件、提示信息组成。 表单域:包含表单元素的区域,用于将信息提交给服务台 <form></form>标签用于定义表单域,以实现用户信息的...
  • form表单中的Input使用disabled导致不能提交,经测试终有一解,具体如下,希望遇到类似问题的朋友可以参考下,希望对大家有所帮助
  • 处理问题时,发现给文本框赋值 model = '' 时,文本框不可编辑,点进别的文本框或点击了其他元素时才看到之前输入的一些东西,我的解决方法: 譬如对象为 let obj = { name: 'xxxx' } this.$set(obj,'name','要...
  • 大纲1、认识表单2、认识表单元素3、表单元素的分类4、表单元素——文本框5、表单元素button6、表单元素——单选、多选7、表单元素——select8、表单元素——textarea9、推荐1、认识表单1、在一个页面上可以多个...
  • HTML 表单用于搜集不同类型的用户输入。HTML的表单中,常见的以下控件:文本框(text)、密码框(password)...2.表单如何添加控件当我们想在表单中添加一个文本框,或者按钮时,我们应该先使用来使用它们,添加文本...
  • 实际操作可能需要动态的创建和删除一个元素,比较常见是添加一个文本框一个删除按钮,点击删除按钮可以删除相应的文本框,下面就结合一个实例详细介绍一下如何实现此效果。代码实例如下:添加和删除文本框-犀牛...
  • 本文以实例代码演示说明了HTML5新增的表单元素和属性,演示代码包含了placeholder属性、autofocus 属性、list 和 datalist 元素、search 类型文本框、email 类型文本框、number 类型文本框、range 类型文本框、tel...
  • HTML的文本框 即表示文本框  并且只能够输入一行  如果要输入多行  使用文本域  注: 标签很特别,一般是不需要写成或者 这样的。  并且 这样的写法也是满足标准的 ...placeholder是一个ht
  • 表单页面,为了使表单元素和文字都垂直居中对齐,加样式input,select{vertical-align:middle},文本框和下拉框都没问题,但是单选框和复选框就杯具了。 大多表现:单选,复选和文字无间距,单选文字偏上,复选偏上...
  • window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息。 转载于:https://www.cnblogs.com/qinxuemei/p/3969075.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 57,507
精华内容 23,002
关键字:

在表单中有一个文本框元素