以前都没有想过这个问题,汗颜一下。。。。
------------------------------------------------------------
From: http://www.jb51.net/article/6694.htm
一句话概括主题:<button>具有<input type="button" ... >相同的作用但是在可操控性方面更加强大。
HTML 4.01规范的Forms部分指名表单有以下几种控制类型:buttons, checkboxes, radio buttons, menus, text input, file select, hidden controls, object controls. 其中除了buttons/menus/object controls之外,都是由<input>完成。
我这里说的是<button>和<input>。
<button>和<input>
规范中指名:可以用<button>和<input>来做表单按扭。不同的按钮类型请参考这些元素的详细定义。要注意的是<button>比<input>支持更丰富的表现功能。
一些区别
大家都知道<input>可以这样用(实际上是一定要这样用):<input type="submit" value="OK" />,一定要这样闭合。而不是:<input type="submit" value="OK" ></input>。因为起始标签为必须,而关闭标签是禁止的。
<button>比<input>更厉害的地方就在于它可以包含内容。它的值并不是写在value属性里,而是包含在标签中。如:<button>OK</button>。<button>的起始标签和关闭标签都是必须的。这样你便获得了样式化的主导权。
你可以这样写:<button><strong>OK</strong>, I do.</button>,甚至是插入图片:<button><img src="button.gif" alt="" />, it's great.</button>。有点类似于<input type="image">,但是显然强大多了。
最后要注意的是,被<button>包含的图片,不能使用热点地图,即不能<img src="foo.gif" usemap="..." />,这是不合法的。当然也不能再包含诸如input, select, textarea, label, button, form, fieldset, iframe,和isindex(不推荐使用)元素了。
本文来自: 脚本之家(www.jb51.net) 详细出处参考:http://www.jb51.net/article/6694.htm
分享到:
相关推荐
标题中的"示例源码input.7z"指的是一个包含Qt6 QML Book中关于Quick入门及输入元素类型的示例代码的压缩包。QML(Qt Meta Language)是Qt框架的一部分,用于创建富图形用户界面,它以声明式语言编写,使得设计和编程...
10. **浮层和悬停效果**:利用`position`和`z-index`可以创建按钮上的浮层效果,如提示信息或下拉菜单,增强功能性和用户体验。 通过这些知识点,开发者可以创造出具有个性化和互动性的CSS按钮,使网页设计更加丰富...
input type="button" value="Z"/><input type="button" value="X"/><input type="button" value="C"/><input type="button" value="V"/><input type="button" value="B"/><input type=...
首先,我们需要一个Bootstrap的输入框,通常包括`<form>`、`<input>`和`<div class="invalid-feedback">`等元素。例如: ```html 电子邮件地址 <input type="email" class="form-control" id=...
通过`position`属性(如`relative`、`absolute`或`fixed`)和`z-index`控制伪元素的位置和层次,以实现各种视觉效果。 在提供的文件中,例如`index3.html`、`index4.html`等,可能包含了不同的CSS按钮和伪元素的...
此外,还将接触到表格(`<table>`)、列表(`<ul>`、`<ol>`、`<li>`)、表单(`<form>`、`<input>`、`<button>`)等元素,这些都是构建交互式网页的关键。 其次,CSS(Cascading Style Sheets)是用于控制网页外观...
特别是在处理表单组件时,`input`、`textarea`、`button`等元素可以通过简单的CSS规则进行美化,而`select`和`input[type=file]`(文件输入)则相对复杂。`input[type=file]`默认的样式通常由浏览器控制,很难通过...
`input`元素的`z-index`设为1或更高,确保它位于顶层。同时,设置`opacity`为0,使其完全透明。然后,通过监听`change`事件处理文件选择。例如: ```html <input type="file" @change="picUpload($event)" ...
1. **Components**: 这个目录包含所有 Ant Design 的组件源码,如 Button、Input、Table 等。每个组件都是一个独立的模块,可以通过引入 React 组件的方式来使用。 2. **Style**: 这里是 Ant Design 的样式文件,...
在Bootstrap中,搜索框通常使用`<form>`元素和`<input>`元素来构建。以下是一个基本的搜索框结构: ```html <div class="input-group search-input-group"> <input type="hidden" name="scope" value="1"> ...
2. **核心组件**:在 `src` 目录下,你会找到各种组件的源代码,如 Button、Input、Table 等。每个组件通常包含 `.jsx` 或 `.tsx` 文件(React 组件代码)、样式文件(`.css` 或 `.scss`)以及相关的测试文件。通过...
6. 按钮:`<button>`、`<input type="submit">`、`<input type="reset">`,分别用于提交表单、重置表单和自定义操作。 三、表单验证 HTML5引入了内置的验证功能,可以通过`required`属性确保字段必填,`pattern`...
`<form>`标签用于创建一个表单,它可以包含各种输入控件,如`<input>`、`<textarea>`、`<select>`和`<button>`等。这些元素各自有不同的用途: 1. `<input>`:这是最常用的输入控件,可以通过type属性定义不同的...
<button type="submit">计算</button> ``` 然后,在`calculator.php`文件中,我们可以这样处理用户输入: ```php $num1 = $_POST['num1']; $num2 = $_POST['num2']; $operator = $_POST['operator']; switch ...
在HTML代码中,这些元素会通过不同的标签来表示,例如`<input>`用于创建输入字段,`<button>`用于创建按钮,`<img>`用于显示图片等。 在描述中提到的“高仿”,意味着这个登录界面尽可能地模仿了原版QQ的视觉效果和...
5. **表单元素**:商城网站通常包含用户交互,如搜索框(`<input type="text">`)、提交按钮(`<button>`)、选择列表(`<select>`)、复选框(`<input type="checkbox">`)等。表单数据可以通过`<form>`标签进行...
1. **按钮(Button)**:提供各种样式和大小的按钮,支持加载状态和组合按钮。 2. **表格(Table)**:灵活的数据展示组件,支持排序、筛选、多选等功能。 3. **卡片(Card)**:用于展示信息的容器,可以包含图片、...
例如,可以为`<input>`和`<label>`设置不同的状态(如:checked和未checked)下的样式。 ```css input[type="checkbox"] { display: none; } label { width: 50px; height: 25px; background-color: #ccc; ...
此外,`<button>`和`<input type="submit">`用于提交表单,`<input type="reset">`则用于重置所有输入值。我们还可以通过`<fieldset>`和`<legend>`组织表单结构,提高可读性。 在表单验证方面,HTML5引入了内置的...