WEB基础之： form标签

form表单

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文本框是否应是只读的
requiredwhether 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>
posted @ 2020-12-03 06:41  f_carey  阅读(7)  评论(0)  编辑  收藏  举报  来源