input type="submit"
"submit"
类型的<input>元素呈现为提交按钮 - 单击一个将尝试提交表单到服务器。
<input type="submit" value="Submit to me">
值 | 用作按钮标签的DOMString |
---|---|
活动 | 点击 |
支持的通用属性 | 类型和价值 |
IDL属性 | 值 |
方法 | 没有 |
值
<input type="submit">
元素的value
属性包含一个 DOMString
作为按钮的标签
<input type="submit" value="Submit to me">
如果你不指定一个value
,你会得到一个默认标签,如提交 / 提交查询(取决于浏览器)的按钮:
<input type="submit">
使用提交按钮
<input type="submit">
按钮用于提交表单。如果你想创建一个自定义的按钮,然后使用JavaScript自定义行为,你需要使用<input type="button">
或更好的<button>
元素。
但是,您需要注意的是,如果您只在表单(例如<button>My button</button>
)中包含单个按钮元素,则浏览器会将其计为提交按钮。除了可能要包含的任何其他按钮之外,还需要显式声明提交按钮。
一个简单的提交按钮
我们将开始创建一个简单的提交按钮:
<form>
<div>
<label for="example">Let's submit some text</label>
<input id="example" type="text" name="text">
</div>
<div>
<input type="submit" value="Submit to me">
</div>
</form>
呈现如下:
尝试在文本字段中输入一些文本,然后提交表单。
提交后,在这种情况下发送到服务器的数据键/值对text=mytext
将根据您在文本字段中输入的文本而定。提交数据的地点和方式取决于您如何设置<form>
属性(和其他详细信息) - 请参阅发送表单数据以获取更多详细信息。
添加提交键盘快捷键
键盘快捷键(也称为访问键和键盘等价物)可让用户使用键盘上的键或键组合来触发按钮。要将键盘快捷键添加到提交按钮 - 就像使用任何<input>
有意义的键一样 - 可以使用accesskey
全局属性。
在这个例子中,s被指定为访问键(您需要按s加上您的浏览器/操作系统组合的特定修饰键;请参阅accesskey
这些键的有用列表)。
<form>
<div>
<label for="example">Let's submit some text</label>
<input id="example" type="text" name="text">
</div>
<div>
<input type="submit" value="Submit to me"
accesskey="s">
</div>
</form>
注意:以上例子的问题当然是用户不知道访问密钥是什么!在真实网站中,您必须以不干扰网站设计的方式提供此信息(例如,通过提供易于访问的链接指向网站访问键的信息)。
禁用和启用提交按钮
要禁用提交按钮,只需disabled
在其上指定全局属性,如下所示:
<input type="submit" value="Disabled" disabled>
您可以在运行时通过设置disabled
为true
或来启用和禁用按钮false
; 在JavaScript中,这看起来像btn.disabled = true
。
注意:请参阅<input type="button">
页面以获取有关启用/禁用按钮的更多信息。
注:Firefox将不像其他的浏览器,默认情况下,坚持动态禁用状态一的<button>
整个页面加载。使用该autocomplete
属性来控制此功能。
验证
提交按钮不参与约束验证; 他们没有被可约束的值
例子
我们已经包含上面的简单例子。关于提交按钮没有什么可说的。
规范
规范 | 状态 |
---|---|
HTML生活标准在该规范中定义了<input type =“submit”>''。 | 生活水平 |
HTML5该规范中的<input type =“submit”>'的定义。 | 建议 |
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | (Yes) | (Yes) | 1.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | 4.0 (4.0) | (Yes) | (Yes) | (Yes) |
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com