网页设计学习笔记

HTML,CSS,JavaScript

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: :: 管理 ::

网页中的表单元素用于向服务器提交数据。例如:

<form action="http://example.com/signin.php" method="post">
    <label for="username">Username: </label>
    <input type="text" name="user" id="username"><br>
    <label for="password">Password: </label>
    <input type="password" name="pass" id="password"><br>
    <input type="submit" value="Sign In">
</form>

这样点击提交按钮后将会把用户名和密码提交并转到 http://example.com/signin.php。

表单元素中包含的各种控件有如下这些:

表单控件 实际例子 控件描述
提交按钮 <button type="submit">提交</button> 提交表单中的各控件数据到服务器
<input type="submit" value="提交">
重置按钮 <button type="reset">重置</button> 清除表单中的各控件数据并重置为默认值
<input type="reset" value="重置">
推送按钮 <button type="button">推送</button> 无默认操作,在按钮的事件处理函数中提交数据
<input type="button" value="推送">
图片按钮 <input type="image" src="submit.png" alt="Submit"> 提交所点击位置的 X 和 Y 坐标到服务器
单选控件 <input type="radio" name="gender" value="Male" checked>男
<input type="radio" name="gender" value="Female">女
从若干选项中选择一个值
多选控件 <input type="checkbox" name="Apple" checked>苹果
<input type="checkbox" name="Banana">香蕉
从若干选项中选择多个值
下拉列表 <select name="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="pear" selected="selected">Pear</option>
</select>
从下拉列表中选择一个值
单行文本 <label for="username">Username: </label>
<input type="text" name="user" id="username">
输入单行文本
单行密码 <label for="password">Password: </label>
<input type="password" name="pass" id="password">
输入单行密码
多行文本 <textarea name="content" rows="10" cols="80">
第一行文本。
第二行文本。
</textarea>
输入多行文本
文件选取 请选择需要上传的文件: <input type="file" name="content"> 选择本地文件以供上传
隐藏控件 <input type="hidden" name="country" value="China"> 隐藏的表单域,用户不能直接修改,但在 JavaScript 中可以修改

对于前面三种按钮控件,可以看到使用 <button> 或者 <input> 元素都可以,但两者是有一些区别的:

  • <input>中不能包含其它元素,而 <button> 中可以包含更多的行内元素,因此很容易加上按钮图标。
  • 在标准浏览器中点击 <button> 按钮提交的是 value 值,而在 IE6 和 IE7 中,提交的是 <button> 的 innerText。
  • 在 IE6 和 IE7 中,当表单中有多个 <button> 按钮时,点击任何一个按钮将提交所有按钮。
  • 在 Firefox 中,<input> 元素无法设置 line-height 属性。

参考资料:
[1] W3C - HTML 4.01 Specification - Forms
[2] W3Schools - HTML input type Attribute
[3] MDN - HTML element reference - <button>
[4] MDN - HTML element reference - <input>
[5] HTML/Elements/form - W3C Wiki
[6] Bootstrap - CSS - Button tags
[7] Stack Overflow - input type=“submit” Vs button tag
[8] Stack Overflow - <button> vs. <input type=“button” />

posted on 2013-11-22 19:56  zoho  阅读(646)  评论(0编辑  收藏  举报