表单元素

我与影子孤独终老i 提交于 2019-11-29 15:38:13

表单元素

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!