表单元素
表单元素
<form></form>
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textaera、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
属性:
action:表示要提交给哪个页面上。
method: 数据提交的方式:
1.get:显式提交,显示值且有长度限制
2.post:隐式提交,不显示值没有长度限制
target:规定在何处打开 action URL。
_blank | 在新窗口中打开。 |
_self | 默认。在相同的框架中打开。 |
_parent | 在父框架集中打开。 |
_top | 在整个窗口中打开。 |
framename | 在指定的框架中打开。 |
enctype:form-date:文件上传。
<input></input>
<input> 标签用于搜集用户信息。
主要形式分为三大类:文本、按钮和选择。
文本:单行文本框和文本域。
单行文本框:
type=text:代表文本,简单的文本框可以输入任意值。
type=password:代表密码框,输入的值全变为星号。
type=hidden:代表隐藏域,不显示。
name:代表文本框的名称。
value:代表文本框的值。
文本域:
textarea:
<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性
rows:规定 textarea 的行高。
cols:规定 textarea 的宽度。
按钮:
type=button:定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
type=submit:定义提交按钮。提交按钮会把表单数据发送到服务器。
type=reset:定义重置按钮。重置按钮会清除表单中的所有数据。
type=image:定义图像形式的提交按钮。
选择:分为<input />和<select></select>
<input>:
type=radio:定义单选按钮。
type=checkbox:定义复选框。
type=file:定义输入字段和 "浏览"按钮,供文件上传。
<select></select>:下拉列表
<option>:
定义下拉列表中的一个选项(一个条目)。
浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。
option 元素位于 select 元素内部。
属性:multiple:多选项。
其他属性:
readonly:
readonly 属性规定输入字段为只读。
只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。
readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。
disabled:
disabled 属性规定应该禁用 input 元素。
被禁用的 input 元素既不可用,也不可点击。可以设置 disabled 属性,直到满足某些其他的条件为止(比如选择了一个复选框等等)。然后,就需要通过 JavaScript 来删除 disabled 值,将 input 元素的值切换为可用。
注释:disabled 属性无法与 <input type="hidden"> 一起使用。
checked :
hecked 属性规定在页面加载时应该被预先选定的 input 元素。
checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。
checked 属性也可以在页面加载后,通过 JavaScript 代码进行设置。
selected:
selected属性规定在页面加载时应该被预先选定的select元素。