█ 【web学习之html】 HTML基础 - 表单学习
█ 相关文章：
-
● 【web学习之html】 HTML基础 - 常见语法总结
● 【web学习之html】 HTML基础 - 表单学习
● 【web学习之Js】 JavaScript基础 - 基础语法
● 【web学习之demo】 一个Demo的解析
● 【web学习之eclipse】 用eclipse从git(码云)上下载maven项目
█ 表单的学习：
-
● w3school说:
表单用于搜集不同类型的用户输入。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等
● 歪脖先生说:
1.表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。
2. 表单是控件的容器，一个表单由form元素(用来创建表单)、表单控件(用来收集用户数据)和表单按钮(包括提交按钮、重置按钮和一般按钮)三部分组成。
3. 访问者通过提交按钮提交表单，表单提交后，他们填写的数据就会发送到服务器端进行处理。
● 丁倩老师说：
表单的典型应用：假定登录 126 邮箱
1.客户端：请求登录，通过表单填写账户信息
2.服务器端：验证发来的账号信息，然后给出反馈
● 表单的语法：
< form action=“表单提交地址” method=“提交方法” name=“表单的名称”>
//文本框、按钮、密码框、文件选择框、下拉列表、日期选择器等表单元素
<input name=“表单元素名称1” type=“类型” value=“值” size=“显示宽度” maxlength=“最大长度" checked=“是否选中” readonly=“是否只读” " disabled=“是否可用”/>
<input name=“表单元素名称2” type=“button” value=“点击” size=“20” maxlength=“20" checked=“checked” readonly=“readonly” " disabled=“disabled” />
< /form>
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集） |
| action | 规定向何处提交表单的地址（URL）（提交页面），如果为空则代表向当前页面提交 |
| enctype | 规定被提交数据的编码（默认：url-encoded） |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。get方法地址栏可见，推荐post方法，保密性好 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name） |
| type | 可选值 text（单行文本框，默认）、textarea(多行文本域)、button(一般按钮)、submit(提交按钮)、reset(重置按钮)、checkbox(复选框)、radio(单选按钮)、password(密码框)、file(文件选择框)、select(下拉列表)、date(日期选择器)、month(日期选择器)、week(日期选择器)、color(颜色选择器)、range(滑动块)等 |
| size | 规定输入字段的宽度（以字符计） |
| value | 规定输入字段的默认值 |
| checked | 仅与 或 配合使用，选中值为 checked |
| readonly | 某个框内的内容只允许用户看，不能修改 |
| disabled | 因没达到使用的条件，限制用户使用 |
PS1: 当用户点击submit(提交按钮)后：会将数据提交到action指定的文件进行处理
PS2: 当用户点击reset(重置按钮)后：会清除用户填写的数据，将整个表单恢复到页面初始加载时的状态。
● 一个demo：
< !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” // DOCTYPE声明 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
< html xmlns=“http://www.w3.org/1999/xhtml”>
< head> // 网页头部（用于设置网页的一些属性）
< meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
< title>用户登录< /title> < /head>
< body>// 主体部分（网页内容编辑区）
< form method=“post” action=“login.jsp” b>// 表单
< h3>用户登录< /h3>
< p>用户姓名：< input type=“text” name=“username” value=“张三丰”/>< /p>
< p>用户密码：< input type=“password” name=“pwd” placeholder=“请输入密码”/>< /p>
< p> 用户身份：< input type=“radio” name=“loginType” value=“1” checked=“checked”/>学生// 单选框
< input type=“radio” name=“loginType” id=“tearch” value=“2”/>
< label for=“tearch”>教师 < /label>< /p>// label关联表单元素,使得教师和单选框为一体
< p> 登录方式：< select>< option value=“normal”>普通登录< /option>// 下拉列表
< option value=“admin”>管理登录< /option>< /select>< /p> < br>
< p>< input type=“checkbox” name=“remember” value=“1” checked style=“color: #ff0000”/> 记住密码 // 复选框
& nbsp;& nbsp;< input type=“checkbox” name=“auto” value=“1”/> 自动登录< /p>
< p> < input type=“submit” name=“submit” value=“登录” style=“width:200px;height:25px” /> < /p>// 提交按钮
< p> < input type=“reset” name=“reset” value=“重置”/>
< button type=“button” style=“color: #0000ff” onclick=“alert(‘请找管理员！’)”>忘记密码< /button> < /p>
< /form>
< /body>
< /html>
PS1: 当用户点击submit(登录按钮)后：会将数据提交到action指定的login.jsp文件进行处理
PS2: login.jsp文件通过表单元素的name关键字获取表单数据:
request.setCharacterEncoding(“UTF-8”);
String username=(String)request.getParameter(“username”);// 取出【用户姓名】的值
String password=(String)request.getParameter(“pwd”);// 取出【用户密码】的值
// response.setHeader(“refresh”,“1”);// 一秒刷新页面一次
// response.setHeader(“refresh”,“2;url=home.jsp”);// 二秒跳到home.jsp页面
// response.setHeader(“location”,“home.jsp”);// 访问home.jsp页面
// response.sendRedirect(“home.jsp”);// 访问home.jsp页面
█ XHTML框架结构：
-
● < iframe>标签：
作用：创建文档的内联框架
属性
src ( 需引入的文档路径 )
width/height ( 设定框架的宽与高)
scrolling (是否显示滚动条，auto | yes | no)
frameborder( 是否要边框，1 显示，0 不显示)
name ( 内联框架的名称)
● 行级标签
行级标签又称为内联标签，行级标签不会单独占据一行，设置宽高无效，行内内部可以容纳其他行内元素，但不 可以容纳块元素，不然会出现无法预知的效果。
span、strong、em、b、i、input、a、img、textarea
● 块级标签
块级标签单独占据一行，可以设置宽高，块元素内部 可以容纳其他块元素或行元素；
p、div、ul、ol、dl、li、dd、dt、h1—h6、form、hr
PS: 单双标签，单标签是否都是行级标签？
█ JavaScript：
-
● JavaScript是一种描述语言，基于对象和事件驱动的脚本语言
脚本语言（一种轻量级的编程语言）
一种解释性语言（无需预编译）
被设计为向HTML页面添加交互行为
运行于客户端
● JavaScript和JAVA的关系
JavaScript与JAVA没有关系，不同公司的
● JavaScript特点
可以使网页增加互动性，能及时响应用户的操作。
可以操作页面的DOM元素
可以操作浏览器窗口(打开、关闭、移动、定位和调节尺寸)
可以动态操作数据表格
可以对提交表单做即时验证
1.行内引入(html标签)：< button onclick=“alert(123)”>行内引入</ button>
2.内部引入(script标签):< script type= " text/javascript" > 这是js的内部引入< /script>
3.外部引入(引用文件):：< script type=“text/javascript” src="…/test.js">< /script>
PS1: script标签一般定义在head或body中
PS2: 行内引入方式必须结合事件来使用
PS3: 外部的JS文件，它具有维护性高、可缓存(加载一次，无需加载)、方便未来扩展、复用性高等特点
● 常用的消息框
alert("这是一个alert对话框"); prompt("这是一个prompt带输入的对话框1"); prompt("这是一个prompt带输入的对话框2", ""); prompt("这是一个prompt带输入的对话框3","请输入留言"); confirm("这是一个confirm确认信息？");
PS: 确定则返回true，取消则返回false
● JavaScript的变量
1、变量名区分大小写，代码也区分大小写
2、以字母或下划线或美元符$开始
3、不能使用关键字
4、先声明后使用
5、变量可以重复赋不同类型的值
PS: 句尾的分号要不要省略？答案是：工具来帮我们自动完成，因此可以不用写！
● 数据类型:Undefined(未赋值)、Null(未存在的对象)、Number、Boolean、String
● typeof检测变量的类型，返回值为字符串类型
undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean：true或false
number：整数或浮点数
function：函数方法
object：对象 或 数组 或 Null 类型
█ 相关资料：
-
● 1.HTML 教程- w3school
● 2.HTML 参考手册- w3school
● 3.2018-04-11 HTML 什么是表单 - 歪脖先生的博客 - ixygj197875 - CSDN博客
● 4.2016-10-17 写javascript时要不要省略分号？ - 对角另一面 - CSDN博客
转载请注明出处：