`
liudaoru
  • 浏览: 1579020 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

BUTTON和INPUT的区别[z]

    博客分类:
  • Ajax
阅读更多

以前都没有想过这个问题,汗颜一下。。。。

------------------------------------------------------------

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

    标题中的"示例源码input.7z"指的是一个包含Qt6 QML Book中关于Quick入门及输入元素类型的示例代码的压缩包。QML(Qt Meta Language)是Qt框架的一部分,用于创建富图形用户界面,它以声明式语言编写,使得设计和编程...

    Css Button

    10. **浮层和悬停效果**:利用`position`和`z-index`可以创建按钮上的浮层效果,如提示信息或下拉菜单,增强功能性和用户体验。 通过这些知识点,开发者可以创造出具有个性化和互动性的CSS按钮,使网页设计更加丰富...

    jquery输入框与简易键盘

    input type="button" value="Z"/&gt;&lt;input type="button" value="X"/&gt;&lt;input type="button" value="C"/&gt;&lt;input type="button" value="V"/&gt;&lt;input type="button" value="B"/&gt;&lt;input type=...

    Bootstrap实现input控件失去焦点时验证

    首先,我们需要一个Bootstrap的输入框,通常包括`&lt;form&gt;`、`&lt;input&gt;`和`&lt;div class="invalid-feedback"&gt;`等元素。例如: ```html 电子邮件地址 &lt;input type="email" class="form-control" id=...

    CSS按钮与伪元素

    通过`position`属性(如`relative`、`absolute`或`fixed`)和`z-index`控制伪元素的位置和层次,以实现各种视觉效果。 在提供的文件中,例如`index3.html`、`index4.html`等,可能包含了不同的CSS按钮和伪元素的...

    Web前端 实验 实验三(1).7z

    此外,还将接触到表格(`&lt;table&gt;`)、列表(`&lt;ul&gt;`、`&lt;ol&gt;`、`&lt;li&gt;`)、表单(`&lt;form&gt;`、`&lt;input&gt;`、`&lt;button&gt;`)等元素,这些都是构建交互式网页的关键。 其次,CSS(Cascading Style Sheets)是用于控制网页外观...

    css美化input file按钮的代码方法

    特别是在处理表单组件时,`input`、`textarea`、`button`等元素可以通过简单的CSS规则进行美化,而`select`和`input[type=file]`(文件输入)则相对复杂。`input[type=file]`默认的样式通常由浏览器控制,很难通过...

    Vue触发隐藏input file的方法实例详解

    `input`元素的`z-index`设为1或更高,确保它位于顶层。同时,设置`opacity`为0,使其完全透明。然后,通过监听`change`事件处理文件选择。例如: ```html &lt;input type="file" @change="picUpload($event)" ...

    ant-design - 副本.7z

    1. **Components**: 这个目录包含所有 Ant Design 的组件源码,如 Button、Input、Table 等。每个组件都是一个独立的模块,可以通过引入 React 组件的方式来使用。 2. **Style**: 这里是 Ant Design 的样式文件,...

    Bootstrap实现弹性搜索框

    在Bootstrap中,搜索框通常使用`&lt;form&gt;`元素和`&lt;input&gt;`元素来构建。以下是一个基本的搜索框结构: ```html &lt;div class="input-group search-input-group"&gt; &lt;input type="hidden" name="scope" value="1"&gt; ...

    element-react ui 源码wqwq2.7z

    2. **核心组件**:在 `src` 目录下,你会找到各种组件的源代码,如 Button、Input、Table 等。每个组件通常包含 `.jsx` 或 `.tsx` 文件(React 组件代码)、样式文件(`.css` 或 `.scss`)以及相关的测试文件。通过...

    html表单制作及实例 + 打卡表单设计

    6. 按钮:`&lt;button&gt;`、`&lt;input type="submit"&gt;`、`&lt;input type="reset"&gt;`,分别用于提交表单、重置表单和自定义操作。 三、表单验证 HTML5引入了内置的验证功能,可以通过`required`属性确保字段必填,`pattern`...

    表单练习与知识点.7z

    `&lt;form&gt;`标签用于创建一个表单,它可以包含各种输入控件,如`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;select&gt;`和`&lt;button&gt;`等。这些元素各自有不同的用途: 1. `&lt;input&gt;`:这是最常用的输入控件,可以通过type属性定义不同的...

    php版简单计算器.7z

    &lt;button type="submit"&gt;计算&lt;/button&gt; ``` 然后,在`calculator.php`文件中,我们可以这样处理用户输入: ```php $num1 = $_POST['num1']; $num2 = $_POST['num2']; $operator = $_POST['operator']; switch ...

    高仿QQ登录界面html.7z

    在HTML代码中,这些元素会通过不同的标签来表示,例如`&lt;input&gt;`用于创建输入字段,`&lt;button&gt;`用于创建按钮,`&lt;img&gt;`用于显示图片等。 在描述中提到的“高仿”,意味着这个登录界面尽可能地模仿了原版QQ的视觉效果和...

    htm作业会员精品店.7z

    5. **表单元素**:商城网站通常包含用户交互,如搜索框(`&lt;input type="text"&gt;`)、提交按钮(`&lt;button&gt;`)、选择列表(`&lt;select&gt;`)、复选框(`&lt;input type="checkbox"&gt;`)等。表单数据可以通过`&lt;form&gt;`标签进行...

    Element 前端开发插件资源包Components.7z

    1. **按钮(Button)**:提供各种样式和大小的按钮,支持加载状态和组合按钮。 2. **表格(Table)**:灵活的数据展示组件,支持排序、筛选、多选等功能。 3. **卡片(Card)**:用于展示信息的容器,可以包含图片、...

    动态切换按钮.zip

    例如,可以为`&lt;input&gt;`和`&lt;label&gt;`设置不同的状态(如:checked和未checked)下的样式。 ```css input[type="checkbox"] { display: none; } label { width: 50px; height: 25px; background-color: #ccc; ...

    简单的form表单模板

    此外,`&lt;button&gt;`和`&lt;input type="submit"&gt;`用于提交表单,`&lt;input type="reset"&gt;`则用于重置所有输入值。我们还可以通过`&lt;fieldset&gt;`和`&lt;legend&gt;`组织表单结构,提高可读性。 在表单验证方面,HTML5引入了内置的...

Global site tag (gtag.js) - Google Analytics