gpt4 book ai didi

HTML 不可见提交输入的缺陷和优势

转载 作者:行者123 更新时间:2023-11-28 00:25:57 25 4
gpt4 key购买 nike

对提交元素进行以下操作有哪些缺陷和优势?

<!doctype html>
<style>
label input{display:none}
label span{background:blue;border:1px solid black;color:white;padding:4px;}
</style>
<form action=#>
<label>
<span>Submit</span>
<input type=submit value=Submit name=Submit>
</label>
</form>

添加示例jsbin.com/onabo4 .

据说 IE 和其他一些浏览器有输入提交样式问题。以上是一个好的解决方案吗?添加 overflow:auto 可修复 IE 浏览器呈现问题,除非您在表格内。以上是好的解决方案吗?

上面的代码还能解决什么其他问题?

编辑: 这似乎也解决了输入元素的显示: block 问题,前提是您需要 type=sumbit 的输入。此处解释了该问题:input with display:block is not a block, why not?

编辑 2: 对于代码纯粹主义者和跨浏览器支持,我建议执行以下操作:onclick 可能是可选的,但某些浏览器可能不支持标签元素。 tabindex 是让用户能够tab 元素。基本上 tabindex 增加了键盘友好性。

<!doctype html>
<style>
.type-submit input{display:none;}
.type-submit{background:pink /* more pretty styles.... */}
</style>
<label onclick=this.form.submit() tabindex class=type-submit>
Sumbit<input type=submit>
</label>

最佳答案

这是一个很好的解决方案。我会在标签中添加一个 onClick="this.parentNode.submit()"(以防万一浏览器不支持点击标签来点击按钮)。

fiddle :http://jsfiddle.net/vqtp9/1/

关于HTML 不可见提交输入的缺陷和优势,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5806260/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com