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="data: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>
WEB基础之: form标签相关推荐
- HTML第一章 (WEB基础知识、 HTML入门、HTML的语法规则、HTML常用标签汇总、图片与超链接、HBuilder的快捷键)
目录 一.WEB基础知识 二.HTML入门 三.HTML的语法规则 四.HTML标签 五.图片与超链接 六.HBuilder的快捷键 每日一句 一.WEB基础知识 我们可以做什么? WEB前端 大前端 ...
- 20145233《网络对抗》Exp8 Web基础
20145233<网络对抗>Exp8 Web基础 实验问题思考 什么是表单? 表单在网页中主要负责数据采集功能 一个表单有三个基本组成部分: 表单标签 表单域:包含了文本框.密码框.隐藏域 ...
- Exp8 web基础 20154301仉鑫烨
20154301 Exp8 Web基础 仉鑫烨 一. 实践内容 Web前端:HTML基础 Web前端:javascipt基础 Web后端:MySQL基础 Web后端:PHP基础 SQL注入 XSS攻击 ...
- 2018-2019-2 网络对抗技术 20165329 Exp 8 Web基础
2018-2019-2 网络对抗技术 20165329 Exp 8 Web基础 原理与实践说明 实践内容概述 基础问题回答 实践过程记录 1.Web前端:HTML 2.Web前端:javascipt ...
- a jquery 标签点击不跳转_form标签的action属性怎么用?form标签action属性的用法介绍(附实例)...
本篇文章主要的介绍了关于HTML中form标签action属性的用法介绍和实例,还有关于form标签的action属性的定义和语法介绍,最后徐还有关于form标签的action属性的作用解释.现在让我 ...
- 2018-2019 20165208 网络对抗 Exp8 Web基础
目录 2018-2019 20165208 网络对抗 Exp8 Web基础 实验内容 基础问题回答 实践过程记录 1. Apache准备 2. Web前端HTML 3. Web前端javascipt ...
- 2018-2019-2 网络对抗技术 20165322 Exp8 Web基础
2018-2019-2 网络对抗技术 20165322 Exp8 Web基础 目录 实验原理 实验内容与步骤 Web前端HTML Web前端javascipt Web后端:MySQL基础:正常安装.启 ...
- Java Web基础
目录 Java Web基础 HTML基础 HTML补充 CSS基础 CSS补充 JavaScript基础 JavaScript补充(例题) Java Web补充 Java Web基础 HTML基础 标 ...
- 2018-2019-2 20165320 《网络对抗技术》 Exp8:Web基础
2018-2019-2 20165320 <网络对抗技术> Exp8:Web基础 一.实践具体要求 (1).Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解 ...
- Exp8 web基础 20164323段钊阳
网络对抗技术 20164323 Exp8 Web基础 回答问题 (1)什么是表单 在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以 ...
最新文章
- linux ssh 连接错误 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
- 051_原码反码补码概念
- php比较函数,判断安全函数
- 【转】文件读写NDK(或Linux)
- .NET Core with 微服务 - Elastic APM
- 仅凭借一本薄薄的时间简史,征服了全球读者...
- Linux 查看数据库MySQL安装文件和安装目录的命令
- python图书管理系统增删改查_固定资产管理系统,高效管理企业资产
- mysql java文件导入导出_MySQL文件导出和导入
- python 输入一行、加密y变成a_下面程序实现如下功能:输入一行字母将字母加密输出(a变成c,b变成d, 一直到z变成b)...
- 批处理(DOS)获取注册表键值
- 项目练习之利用Arraylist 实现学生管理系统(查询,添加,删除,修改)
- win10专业版无法安装更新解决方法
- mysql修改information_schema表时的错误
- python之AQI分析与预测
- Weakly-Supervised Semantic Segmentation via Sub-category Exploration
- 魔兽世界场景组织浅析
- Ubuntu Snap商店代理设置方法
- 爬虫百战穿山甲(3):全国高校的自我介绍,快来找找你的大学吧!!!
- 【LeetCode-SQL】1527. 患某种疾病的患者
热门文章
- PE安装Win10纯净版教程【附Win10企业版/专业版/64/32位系统下载地址以及系统激活工具和解压软件安装包】
- 大数据学习——spark运营案例
- spring-cloud-oauth2
- Padavan编译技巧
- m5CPred‑SVM: a novel method for predicting m5C sites of RNA
- 城阳区人才共有产权住房细则
- JS 应用篇(一):Underfined与Null的区别
- js处理null和underfined
- 【Ubuntu touch for xiaomi 8】小米8第三方ROM
- Ubuntu18.04安装灭霸SLAM:ORBSLAM3