表单元素

Posted 2020-10-15 桃花灬仙人

表单元素

<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元素。