如果我们把input的type设置为submit，是的，提交表单经常需要submit按钮，就像下面这样：
<inputtype="submit"class="button"value="登录"/>
你会发现submit初始状态就是这种焦点获取的黑框样式：精心开发5年的UI前端框架！
怎么办？如果设置border:none，也就是说不要border，那么这种黑框就没 有了，所以有种解决办法是直接把框写死到背景上，然后去除border，即设置border:none。比如下面这个按钮样式的背景罗列。这种办法的缺点 想必大家都清楚，就是灵活性差了点，有多少size的按钮就要准备多少size的背景。
一直以来我也很天真的认为就这么一种办法了，直到我膝盖中了一箭，偶然一次查看 FaceBook的HTML代码发现了其高明之处，FB也使用了边框border，背景是背景的分离办法，但是其在IE7或者IE6下就是没有黑框，实现 方法很巧妙，就是利用了label的特性，具体思路就是input按钮去除框线（border:none），然后input外面套上 label，border写到label上，由于input被去除了border，所以不会出现黑框，同时外面的label有border，所以用户可以 看到正常的框线，当然由于label的特性，你点击label的时候也等于点击了input按钮，哦，对了，为了模拟得更好一点，你可以设置他们的 cursor为pointer，改良版的代码如下： 精心开发5年的UI前端框架！
<style type="text/css">
.button-fixed {
background:#fff url("btnbg.png") repeat-x 0 center;
height:25px;
width:130px;
border: none;
margin:0;
cursor: pointer;
}
.button-wrapper {
display:block;
padding:0;
width:130px;
border: #707070 1px solid;
cursor: pointer;
}
</style>
label模拟去黑框普通button按钮
<br />
<label class="button-wrapper">
<input type="button" class="button-fixed" value="登录" />
</label>
<br />
label模拟去黑框submit按钮
<br />
<label class="button-wrapper">
<input type="submit" class="button-fixed" value="登录" />
</label>
相关推荐
首先，我们需要添加一个form标签，并在其中添加多个label标签和input标签。 ``` <p class="input"> <label for="author">姓 名</label> <input type="text" aria-required="true" tabindex="1" size="12" value=...
按钮在HTML中通常使用`<button>`或`<input type="button">`标签创建。为了美化按钮，我们可以使用CSS来定义其外观，如大小、颜色、边框、背景等。例如： ```html 点击我 ``` ```css .myButton { padding: 10px 20...
<label><input type="checkbox" id="rememberMe"> 记住我</label> <button type="submit">登录 忘记密码? ``` 4. 验证与提交： 在用户点击登录按钮时，通常需要验证输入的用户名和密码是否有效。这可以...
每一项输入字段可以用`<input>`标签来定义，其中`type`属性决定了输入字段的类型，如`text`、`password`、`email`、`submit`等。为了提高表单的可用性和安全性，`<label>`标签应当与输入字段相关联，这样用户点击...
### HTML基本标签详解 ... <input type="submit" value="提交"> ``` 通过以上介绍，我们可以看到HTML提供了丰富的标签来构建复杂的网页。理解并熟练掌握这些标签及其属性对于制作高质量的网页至关重要。
`<input>` 是一个非常强大的标签，用于获取用户的输入。其类型 (`type`) 属性决定了输入控件的样式和功能： - **`type="text"`**：创建一个单行文本输入框。 - **`maxlength`**：限制用户可以输入的最大字符数。 ...
4. **创建平面按钮和输入框**：通过CSS样式设置边框、宽度、高度、字体大小、背景颜色和文本颜色，可以创建具有特定外观的按钮和输入框，例如`<input type=submit>`和`<input type=text>`标签。 5. **按钮颜色变化*...
最后，`<input type="submit">` 创建了一个提交按钮，设置了背景色、文字颜色、字体大小、内边距、边框样式和圆角，以及鼠标悬停时的指针形状，使其看起来更像一个可点击的按钮。 CSS 代码部分负责定义所有元素的...
- `<label>`标签用于定义输入字段的标签，通常与`<input>`标签配合使用，提供可点击的文本标签。 由于文档内容中出现了OCR扫描错误，有些信息可能不完整或有误。但通过上述的解释，可以看出文档涵盖了网页开发中...
对于多选框`<input type="checkbox">`和单选按钮`<input type="radio">`，由于浏览器的默认样式比较固定，可以使用CSS复选框和单选按钮的hack来实现自定义，比如使用`::before`和`::after`伪元素配合`:checked`状态...
- 表单元素主要包括 `<form>` 标签、各种输入类型（如 `<input type="text">`、`<input type="password">` 等）、按钮（如 `<button>` 和 `<input type="submit">`）以及标签（`<label>`）等。 - 每个元素都有其...
6. 按钮：`<button>`、`<input type="submit">`、`<input type="reset">`，分别用于提交表单、重置表单和自定义操作。 三、表单验证 HTML5引入了内置的验证功能，可以通过`required`属性确保字段必填，`pattern`...
一个简单的上传表单通常包括 `form` 标签、`input` 元素（类型为 `file` 以支持文件上传）、以及提交按钮（`<button>` 或 `<input type="submit">`）。例如： ```html <label for="upload-input">选择文件</label...
1. 使用`<label>`与`for`属性关联输入字段，便于点击标签时聚焦输入框。 2. 添加`placeholder`属性提供输入提示。 3. 为必填项添加星号`*`或其他提示，确保用户了解哪些字段是必要的。 4. 提供清晰的错误反馈，当...
例如，添加`aria-label`属性为按钮提供有意义的描述，或者确保按钮有清晰的文本内容。 7. **JavaScript交互** 使用JavaScript，我们可以实现更复杂的交互逻辑，比如动态修改按钮的状态、响应用户行为或者处理异步...
<input type="submit" value="按钮" name="B1" onMouseOut="this.style.color='blue'" onMouseOver="this.style.color='red'" class="button"> ``` 此技巧利用`onMouseOver`和`onMouseOut`事件，实现在鼠标悬停时...
在表单中，可以通过`<label>`标签与`<input>`标签结合使用来实现点击文字即可选择对应的单选按钮。 示例代码： ```html <input type="radio" name="regtype" value="A03" id="A03"> ...
使用label标签可以实现点击文字实现radio选项的选定。 ``` <input type="radio" name="regtype" value="A03" id="A03"><label for="A03"> 情侣 : 一次注册两个帐户</label> ``` ...
- **`<label>` 标签**: 结合`<label>`标签和`for`属性，可以实现点击文本时选择对应的`<input type="radio">`。 - **示例**: ```html <input type="radio" name="regtype" value="A03" id="A03"> <label for="A03...