█ 【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博客
转载请注明出处: