WEB基础之： form标签

form表单

• • 1. form标签属性
  • • 1.1 action 属性
    • 1.2 name属性
    • 1.3 method传送方法
    • 1.4 enctype编码方式
    • 1.5 target目标显示方式
  • 2. form中input输入类的控件
  • • 2.1 text文字字段
    • 2.2 password密码域
    • 2.3 radio单选按钮
    • 2.4 checkbox复选框
    • 2.5 button普通按钮
    • 2.6 submit提交按钮
    • 2.7 reset重置按钮
    • 2.8 image图像域
    • 2.9 hidden隐藏域
    • 2.10 file文件域
  • 3. form中lable定义标签
  • 4. form中button定义按钮
  • 5. form中select列表菜单标记
  • 6. form中textarea文本域标记
  • 7. form中id标记
  • 8. 示例

1. form标签属性

1.1 action 属性

真正处理表单的数据脚本或程序在action 属性里，这个值可以是程序或脚本的一个完整URL。

<form action="表单的处理程序">
    ...
</form>

1.2 name属性

用于给表单命名

<form name="表单名称">
    ...
</form>

1.3 method传送方法

用来定义处理程序从表单中获得信息的方式，指定了如何发送表单数据

method属性	描述
get	在 URL 中添加表单数据： URL?name=value&name=value (默认)
post	使用 http post方法提交表单数据

1.4 enctype编码方式

enctype属性	描述
application/x-www-form-urlencoded	数据在发送前所有字符都会被编码 (默认)
multipart/form-data	没有字符被编码。这个值用于控制表单文件的上传
text/plain	空格转换为"+"符号，但没有特殊字符 编码

1.5 target目标显示方式

指定目标窗口的打开方式，表单的目标窗口往往用来显示表单的返回信息，如是否成功提交了表单的内容，是否出错等。

target属性	描述
_blank	打开新窗口
_self	在相同的框架或窗口中载入目标文档
_parent	把文档载入父窗口或包含了超链接引用的框架的框架集
_top	把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架
framename	在同一个名称的frame框架打开窗口

2. form中input输入类的控件

<form>
    <input name="控件名称" type="控件类型" >
</form>

type控件类型	描述
text	文字字段
password	密码域，用户在页面中输入时不显示具体内容，以*代替
radio	单选按钮
checkbox	复选框
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图形域，也称图像提交按钮
hidden	隐藏域，隐藏域将不显示在页面上，只将内容传递到服务器中
file	文件域

2.1 text文字字段

text属性值用来设定在表单的文本域中输入任何类型的文本，数字或字母，输入的内容以单行显示。

<input type="text"> 

text属性	描述
autocomplete	文本框的 autocomplete 属性值
autofocus	在页面加载后文本框是否自动获取焦点
defaultValue	文本框的默认值
disabled	文本框是否禁用
form	返回一个对包含文本框的表单对象的引用
list	返回一个对包含文本框的选项列表对象的引用
maxLength	文本框中的最大字符数
name	文本框的名称，用于和页面中其他控件加以区别，命名时不能包含特殊字符，也不能以HTML预留作为名称。
pattern	文本框的 pattern 属性值
placeholder	文本框的 placeholder 属性值
readOnly	文本框是否应是只读的
required	whether the text field must be filled out before submitting a form
size	定义文本框在页面中显示的长度，以字符作为单位。
type	返回文本框的表单元素类型
value	文本框的 value 属性值

<form action="mail; 123@test.com" method="get" name="register" >
    姓名：<input type="text" name="username" size="20" maxlength="12">
    网址：<input type="text" name="URL" size="20" value="https://">
</form>

2.2 password密码域

<input type="password" name="password" maxlength="8" >
添加代码禁止用户复制、剪切、粘贴
	<input type="password" name="password" maxlength="8" oncopy="return false" oncut="return false" onpast="return false"> 
改变密码域的掩码样式
	<input type="password" name="password" maxlength="8" oncopy="return false" oncut="return false" onpast="return false" style="font-family: Webdings;">

password属性	描述
defaultValue	密码字段的默认值。
disabled	是否应被禁用密码字段。
form	返回对包含此密码字段的表单的引用。
maxLength	密码字段中字符的最大数目。
name	密码字段的名称。
readOnly	密码字段是否应当是只读的。
size	密码字段的长度。
type	返回密码字段的表单元素类型。
value	密码字段的 value 属性的值。

2.3 radio单选按钮

    <input type="radio" name="test" value="A" checked="checked"> answer A
	<!--    name相同时，选择才会互斥，value用于区别所选值-->
checked表示这一单选按钮默认被选中，而在一个单选按钮组中只能有一项单选按钮控件设置为checked。

2.4 checkbox复选框

<input type="checkbox" name="test" value="A" checked="checked"> answer A

2.5 button普通按钮

<input type="button" name="close" value="按钮的取值" onclick="window.close()">

2.6 submit提交按钮

    <input type="submit" name="submit" value="按钮的取值">

2.7 reset重置按钮

    <input type="reset" name="reset" value="按钮的取值">

2.8 image图像域

    <input type="image" name="图像名称" src="图像地址">

2.9 hidden隐藏域

    <input type="hidden" name="隐藏名称" value="提交的值">

2.10 file文件域

    <input type="file" name="文件名称">
	<!--    依赖一个form属性，enctype="multipart/form-data"-->

3. form中lable定义标签

当用户单击label标签时，和该标签关联的表单控件元素会获得焦点。

隐匿关联：
使用for属性v指定label标记的for属性值为所关联的表单的id属性值；
隐匿关联：
将普通文本，表单控件一起在label标记内部

<form>
    <label for="username">姓名： </label>
    <input type="text" name="username" id="username" size="20">
    <br><br>
    <label>密码：<input type="password" name="password" id="password"></label>
    <br><br>
    <input type="submit" name="submit" value="提交">
</form>

4. form中button定义按钮

button标记用于定义一个按钮，在该标记的内部可以包含普通文本，文本格式化标签和图像等内容，这也是与input中的button按钮不同之处。

<button type="submit"><img src="images/1.jpg" width="160"></button>

button属性	描述
disabled	设置或返回是否禁用按钮。
form	返回对包含按钮的表单的引用。
name	设置或返回按钮的名称。通常与id属性保持一致
type	返回按钮的表单类型。button, reset, submit
value	设置或返回显示在按钮上的文本。

5. form中select列表菜单标记

    <select name="下拉菜单名称">
        <option value="" selected="selected">选项显示内容1</option>
        <option value="选项值">选项显示内容2</option>
    </select>
或
    <select name="下拉菜单名称">
        <option value="" selected="selected">选项显示内容1</option>
        <option value="选项值1">选项显示内容2
        <option value="选项值2">选项显示内容3
    </select>

select属性	描述
disabled	设置或返回是否应禁用下拉列表。
form	返回对包含下拉列表的表单的引用。
length	返回下拉列表中的选项数目。
multiple	设置或返回是否选择多个项目。
name	设置或返回下拉列表的名称。
selectedIndex	设置或返回下拉列表中被选项目的索引号。
size	设置或返回下拉列表中的可见行数。
type	返回下拉列表的表单类型。

6. form中textarea文本域标记

输入的内容可以多行显示

    <textarea name="textarea_name" rows="6" cols="40"></textarea>

7. form中id标记

id标记主要用于标记一个唯一元素(文字字段，密码域，其他的表单元素，图像，表格)

<form>
    <label for="username">姓名： </label>
    <input type="text" name="username" id="username" size="20">
    <br><br>
    <label>密码：<input type="password" name="password" id="password"></label>
    <br><br>
    <input type="submit" name="submit" value="提交">
</form>

8. 示例

<form action="https://www.sogou.com/web">
    <input type="text" name="query">
    <input type="submit" value="搜索">
</form>