属性 size 按可见字符数设置宽度，属性 maxlength 规定最大可输入字符数，要保持整体美观，可用 css。 限制input标签的长度：只有maxlength属性是限制输入长度的；其他的size和style限制的是输入框显示长度，但是不限制输入长度，一直可以输入字符。
2、表单
的<fieldset>与<legend>
当一组表单元素放到 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
legend标签为 fieldset 元素定义标题。
<!DOCTYPE
今天写项目遇到一个问题，在输入老师昵称的时候需要控制
input
输入框不能为空，且字符的
长度
有
限制
，英文字符不能超过20，
中
文不能超过10。输入课程简介的时候，textarea只能输入
中
文和
中
文标点，且
长度
不超过100。使用框架为：Thymeleaf + layui + shiro。
搜了很多资料没找到全的，现将具体实现展示如下：
[不为空的要求：]
这个好解决，只要在代码
中
加入 lay-verify=”required” 即可，这个在layui官方文档
中
就有，参考https://www.layui.com/doc/element/form.
html
下面，咱们主要说
长度
的问题：
如果输入的是数字，通过监听
input
事件再通过slice进行截取
限制
长度
<
input
type="number" on
input
="f(value.length>6)value=value.slice(0,4)">
如果输入的是文字或者字符，就会有一个maxlength属性进行
限制
长度
<
input
type="text" placeholder="只能输入六个字符" maxlength="6">
一：
Input
输入框的只能输入数字，
限制
长度
<label for="recoSoft" class="text-right search_form_div_label">排序：</label>
<
input
type="text" class="form-control" id="recoSoft" maxlength="5" οnkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入排序" style="
<
input
type="number" maxlength="5" /> //没有效果
<
input
type="number" οn
input
="if(value.length>5) value=value.slice(0,5)" /> //js控制，可以
我们通常用到
限制
输入框如
input
框输入的文字
长度
的方法就是在dom层给
input
标签加属性minlength和maxlength
比如这样 minlength=“4” maxlength=“8” 就是最少4个最多8个字符
但是我们在开发的时候不单纯的只是在
中
文状态下的输入，还有英文状态下输入的情况，必将网站国际化嘛哈哈哈哈~~~~。
那么问题来了，
中
文状态下8个字符
长度
挺合适的，英文状态下仅仅8个字符恐怕是不行的吧。
以下为解决办法:
解决思路：
中
文字符是英文字符的2倍，所以当8个字符于
中
文来说合适的
1:js
字符串长度
限制
、判断字符
长度
、js
限制
输入、
限制
不能输入、textarea
长度
限制
2.:js判断汉字、判断是否汉字 、只能输入汉字
3:js判断是否输入英文、只能输入英文
4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字
5:只能输入英文字符和数字
6: js email验证 、js 判断email 、信箱/邮箱格式验证
7:js字符过滤,屏蔽关键字
8:js密码验证、判断密码
2.1: js 不为空、为空或不是对象 、判断为空 、判断不为空
2.2:比较两个表单项的值是否相同
2.3:表单只能为数字和"_",
2.4:表单项输入数值/
长度
限定
2.5:
中
文/英文/数字/邮件地址合法性判断
2.6:限定表单项不能输入的字符
2.7表单的自符控制
1. 检查一段字符串是否全由数字组成
2. 怎么判断是否是字符
3. 怎么判断是否含有汉字
4. 邮箱格式验证
5. 数字格式验证
6. 电话号码格式验证
7. 判断输入是否为
中
文的函数
8. 综合的判断用户输入的合法性的函数
9. 判断密码是否输入一致
10. 判断用户名是否为数字字母下滑线
2.8:form文本域的通用校验函数
1.
长度
限制
function test()
if(document.a.b.value.length>50)
alert("不能超过50个字符！");
document.a.b.focus();
return false;
if(!((event.keyCode>=48&&event.keyCode=96&&event.keyCode<=105)))
//考虑小键盘上的数字键
event.returnvalue=false;
function isEmail(strEmail) {
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
return true;
alert("oh");
7. 屏蔽关键字(这里屏蔽***和****)
function test() {
if((a.b.value.indexOf ("***") == 0)||(a.b.value.indexOf ("****") == 0)){
alert(":)");
a.b.focus();
return false;}
<form name=a
1、什么是WEB
WEB，是基于Internet上的一种应用程序(网页应用程序)
WEB页面，简称WEB页(网页)，就是保存在服务器端上的一个具体的页面( **.
html
/ **.htm 作为结尾的文件)
2、WEB浏览器
1、提交用户请求 (UA : User Agent)
2、作为
HTML
以及 脚本执行的 解释器
3、以图形化的方式显示web页面
2、主要浏览器产品
1、Microsoft Internet Explorer (IE)
2、Mozilla Firefox
3、Google Chrome
4、Apple Safari
5、Opera Opera(欧朋)
3、主要技术
1、
HTML
2、
CSS
3、Javascript
2、
HTML
入门(重点)
1、什么是
HTML
Hyper Text Markup Language
超级 文本 标记 语言
超文本 ：也是文本，但会具备特殊功能
普通文本 a : 普通字符 a
超文本 a : 表示超链接
普通文本 b : 普通字符 b
超文本 b : 加粗显示文本
标记 ：超文本的表现形式
普通文本 a : a
超文本 a :
语言 ：具备一定的语法规范
HTML
也具备自己的语法规范
WEB页面(
HTML
页面)就是由
HTML
语言来进行开发的 ，以 .
html
或 .htm 进行结尾的文件
开发 & 运行网页的工具：
1、记事本
2、浏览器
2、
HTML
的基础语法
1、标记语法
HTML
中
用于描述功能的符号称为"标记"
标记在使用时，用尖括号 "",标记的分类
1、封闭类型的标记
也称为 "双标记" , 必须成对出现
语法：内容
Demo ：
1、创建 p 标记 --...
2、创建 div 标记 --
3、创建 header 标记 -- <header></header>
2、非封闭类型的标记
也称为 "单标记"
语法： 或
Demo ：
1、创建 br 标记 --
2、创建 hr 标记 --
3、创建 img 标记 --
4、创建
input
标记 -- <
input
/>
2、标记(元素)的嵌套
在一对标记
中
，允许出现另外一对(一个)标记
注意：嵌套标记的书写格式 -- 被嵌套的标记要通过一个 缩进键(Tab) 来表示层级关系
Demo :
1、编写一对 body 标记，在body标记
中
，嵌套一对 div标记，在 div 标记
中
，嵌套一对 a 标记，在 a标记
中
，嵌套一对 b 标记，b标记
中
，随意编写一些文本
这是一段测试文本
</body>
3、标记的属性
1、什么是属性
用来修饰标记的效果的内容，就是属性
1、属性必须声明在开始标记
中
2、属性与标记名称之间，用 空格 隔开
3、属性的值 与 属性之间 使用 "=" 连接
4、一个元素允许有多属性，多属性间，排名不分先后，
中
间用 空格 隔开即可
Demo :
1、创建一个 div 标记 ，增加属性 ，设置 align 属性的值为 center ，设置 id 属性的值为 container，设置 title 属性的值为 这是一个div
四大标准属性：
1、id ：定义元素在页面
中
独一无二的名称
2、title ：鼠标悬停在元素上时，体现的文字
3、class ：引用 类选择器时使用(
CSS
中
)
4、style ：定义 内联方式方式使用(
CSS
中
)
语法：<!-- -->
1、注释不能嵌套
2、注释不能出现在标记
中
3、
HTML
文档结构
W3C ：Word Wide Web Consortium (万维网联盟)
1、
HTML
文档的组成
1、文档类型声明
告知浏览器当前的
HTML
文档用的是哪个版本
在网页的最顶端
2、由一对
html
根标记，来表示页面的开始与结束
Demo :
1、在 htdoc
中
，创建一个网页 01-first.
html
文件
创建一个 记事本，将 .txt 重命名为 .
html
2、搭建
HTML
网页结构
1、添加 文档类型声明
2、添加
html
根标记
2、<
html
> 标记
包含两对子元素
1、<head></head>
包含的子元素(2对)
1、<title>网页的标题</title>
2、<meta charset="utf-8"/> -- 能正常显示
中
文
2、<body></body>
1、text ，取值是一个颜色值(red,green,blue...)
2、bgcolor ，取值也是一个颜色值
Demo :
在刚才的 Demo 基础上
1、在 <
html
>
中
增加 <head> 和 <body>
2、为网页指定标题 - 我的第一个
HTML
文档
3、指定网页的字符编码格式为 utf-8
4、在 body
中
输出一句话 "我的第一
HTML
页面"
5、设置 body text为red，bgcolor为yellow
1、特殊文本的实现
页面的空格以及一些特殊字符需要通过转义字符的方式体现
1、 表示一个空格
2、< 表示
4、© 表示©
Demo :
1、创建一个页面 02-text.
html
2、在页面
中
输出以下内容
The element. ©2017 By Tarena
The <p> element. © By Tarena
2、文本样式相关标记
: 下划线
: 删除线
Demo ：
这是一段包含 ，粗体，斜体，下划线，删除线，上标，下标的文本内容
将以上文本内，对应文字的特殊效果，用标记体现出来
3、标题元素
以 醒目 的方式表现出文本
1、align
文本的水平对齐方式
取值：left / center / right
4、段落元素
属性：align : left / center / right
Demo :
1、在 02-text.
html
中
，增加以下内容
1、用 段落标记表示 :The first paragraph
2、用 段落标记表示 :The second paragraph ，文本表现为 右对齐
5、换行元素
6、分割线元素
作用：在页面
中
表现为一条直线
1、size
尺寸，以 px 为单位的数值
2、width
宽度，以 px 或 % 为单位的数值
3、align
水平对其方式
4、color
Demo ：
02-text.
html
中
增加一根水平线，size为5px，宽度为50%，居
中
对齐，颜色为红色(red)
7、预格式化
作用：保留源文档
中
的回车 和 空格 的作用
8、分区元素
1、块分区元素
作用：布局
2、行内分区元素
作用：设置同一行文字内的不同样式
9、行内元素 与 块级元素
按照元素们的表现形式来分类，分为 行内元素 和 块级元素1、行内元素
在一行内允许显示多个元素的，称为 "行内元素"
span,i,b,s,u,sup,sub
作用：包裹文本，并处理文本的表现形式
2、块级元素
每个元素独占一行显示的，称为 "块级元素"
div,p,h1,h2,h3,h4,h5,h6
作用：布局
1、p标记不能嵌套其它的块级元素
2、行内元素
中
最好 不要嵌套块级元素
4、图像 和 链接
1、URL
目录结构 ：
目录 ，保存文件的文件夹名称
多个文件夹之间的关系，就是目录结构
1、什么是 URL
URL (Uniform Resource Locator)，统一资源定位器。用来标识某资源文件的位置
2、URL 在 WEB
中
的表现形式
共三种表现形式：
1、绝对路径
特点：从文件所在的最高级目录处开始查找资源文件所经过的路径，就是绝对路径
使用场合：当想访问互联网上的资源时，只能用绝对路径
完整的绝对路径分四部分：
1、协议名
2、域名(主机名，IP地址)
www.codeboy.com
3、目录路径
img/header
4、文件名
logo.png
http://www.codeboy.com/img/header/logo.png
img/header/logo.png
2、相对路径(重点)
场合：使用本机文件时使用
什么是相对路径：
从当前文件位置处开始查找资源文件所经过的路径，就是相对路径
1、同目录，直接用
2、子目录，先进入
3、父目录，先返回
3、根相对路径
路径形式是以 / 作为开始的。
/ : 表示的是服务器的根路径
1、图像格式
WEB
中
支持的图像格式
1、*.jpg
2、*.gif(动图)
3、*.png(透明)
2、图像的语法
1、src ：指定要显示图像的 URL
2、width ：图像的宽度
3、height ：图像的高度
4、title ：鼠标悬停时，要显示的文本
Demo :
1、将 学子网的 logo 下载下来
2、显示在自己的网页
中
3、超链接
标记：内容
1、href : 要链接的
HTML
页面URL
2、target : 目标，指定新网页的打开形式
1、_blank : 在新标签页
中
打开网页
2、_self : 在自身标签页
中
打开新网页(默认值)
1、创建一个超链接，内容为 ：学子商城，点击时，在自身标签页
中
打开 http://www.codeboy.com
2、创建一个超链接，内容为 ：学子商城的LOGO，点击时，在新标签页
中
打开 http://www.codeboy.com
2、链接的四种表现形式
1、点击操作时，完成资源下载的操作
链接的资源为 zip / rar 时则为下载操作
2、电子邮件链接
必须在计算机
中
安装并配置好至少一个邮件客户端的信息
3、返回页面顶部的空连接
4、执行Javascript代码片段
锚点用于在网页
中
的某个位置处做个记号,允许从其他位置处跳转到记号位置处
2、使用方式
1、定义锚点
1、使用 a 标记的 name 属性允许定义锚点
2、任何标记的 id 属性定义锚点
2、链接到锚点
链接到锚点
链接到锚点
1、表格的作用
按照一定的格式来显示数据的
表格是由 单元格(列)，行 来组成的
2、表格的语法
1、 : 表示一个表格
2、 : 表示表格
中
的一行
3、 : 表行
中
的一列(单元格)
: 行/列 标题 (加粗，水平居
中
)
4、 : 表格的标题
该元素必须添加在 之下，所有的tr之上
2、常用属性
1、table
1、width
2、height
3、align
设置表格的对齐方式 ， left / center / right
4、border
边框宽度，取值以 px 为单位的数值
5、bgcolor
6、cellspacing ：单元格外边距(单元格与单元格 或 单元格与表格之间的距离)
7、cellpadding : 单元格内边距(单元格与内容之间的距离)
1、align
控制当前行内容的水平对齐方式
2、valign
控制当前行内容的垂直对齐方式
top / middle / bottom
3、bgcolor
3、td / th
1、align
2、valign
3、width
4、height
5、colspan ：跨列
6、rowspan ：跨行
Demo :
在 刚才的表格基础上，增加以下内容
1、为表格增加边框 1px
2、为表格增加尺寸 400 * 400
3、为表格增加单元格内边距 5px
4、为第四行 增加属性 ，内容水平居
中
对齐
3、表格的复杂应用
1、行分组
允许将若干行划分到一个组
中
，以便实现统一管理
1、表头行分组
允许将第一行的内容单独分到表头行分组
中
2、表尾行分组
允许将最后一行的内容单独分到表尾行分组
中
3、表主体行分组
2、不规则表格创建
通过 td 的跨行 和 跨列来实现不规则的表格
从指定单元格位置处开始，横向向右，合并掉几个单元格(包含自己),被合并掉的单元格，要删除
从指定单元格位置处开始，纵向向下，合并掉几个单元格(包含自己),被合并掉的单元格，要删除
3、表格的嵌套
被嵌套的所有的内容，只能放在 td
中
按照一定的格式显示数据
2、列表的分类 & 语法
1、列表的组成
由列表类型 以及 列表项 来组成
2、分类 & 语法
1、有序列表
--> Order List
允许包含若干列表项：
--> List Item
2、无序列表
--> Unorder List
允许包含若干列表项：
1、type
1 、按数字方式排列,默认值
a 、按小写英文方式排列
A 、按大写英文方式排列
i 、按小写罗马数字排列
I 、按大写罗马数字排列
2、start
指定标识从 几 开始显示
1、type
1、disc，实心圆,默认值
2、circle，空心圆
3、square，实心矩形
4、none
3、列表的嵌套
被嵌套的内容只能放在 li
中
Demo :
1、声明一个列表在
html
中
(有序)，包含两个列表项，显示 两部小说的名字
2、在两个列表项
中
，再各嵌套一个无序列表，各写3-4个小说
中
的主角
3、定义列表
以一种特殊的结构来排列数据
通常用语对一类事物/名词 的解释上面
：声明一个定义列表
：声明要解释的事物名称 或 名词
：对上述名词或事物解释的内容
3、常用场合
3、结构标记
1、结构标记的作用
搭建网页的结构(布局),用于替代 div，最大的优点是提升了标记的"语义性"
2、结构标记详解
1、<header></header>
作用：表示网页 或 某块内容的头部
作用：表示网页
中
的 导航内容
作用：表示网页主体内容
中
的某一部分
作用：出现在文字描述性比较强的场合:一则新闻，论坛
中
的帖子，微博信息，博客的信息
作用：表示网页
中
，或某部分内容的 边栏信息
作用：表示网页
中
尾部的信息
4、表单(难点)
1、表单的作用
用于收集用户的信息并提交给服务器
表单主体是由两部分组成的
1、表单元素
收集信息，并提交给服务器
2、表单控件
用于与用户交互的一些元素：文本框，密码框
2、表单元素(难点)
标记：<form></form>
注意：只有放在 <form></form> 里面的表单控件的值，才能提交给服务器
1、action
提交给服务器处理程序的地址 (动作)
2、method
提交方式，以什么样的方式把数据交给服务器
1、get
1、以明文的方式将数据传递给服务器(提交的数据会显示在地址栏上)
2、安全性很低
3、提交数据最大
限制
为 2KB
4、向服务器要数据时可以使用
2、post
1、以隐式的方式将数据传递给服务器
2、安全性很高
3、不
限制
提交数据的大小
4、要提交数据给服务器处理时使用
3、... ...
3、enctype
作用：指定表单数据进行编码的方式
1、application/x-www-form-urlencoded
默认值，允许将任意类型的文本提交给服务器
2、multipart/form-data
允许将文件提交给服务器
3、text/plain
不对任何数据进行编码和传输
Demo :
1、创建 05-form.
html
2、声明一个表单元素 form
3、指定提交地址为 login.php,提交方式为 get，编码方式为默认
3、表单控件
表单元素分类：
1、
input
元素
2、textarea 多行文本域
3、select 和 option 选项框
4、其它元素
5、新
input
元素
1、
input
元素
里面会包含若干个不同的表单控件
标记 ：<
input
>
1、type
根据不同的type属性值，可以创建不同的
input
元素
2、name
定义表单控件的名称，主要提交给服务器使用的
注意：如果不声明name属性的话，元素则无法提交给服务器
3、value
定义当前控件的值，主要提交给服务器使用的
4、disabled
禁用控件，无值的属性
<
input
disabled>
2、文本框 与 密码框
文本框：<
input
type="text">
密码框：<
input
type="password">
具备除以上四个属性外，还具备以下几个独立属性：
1、maxlength
限制
输入的字符数，取值为数字
2、readonly
只读，无值属性
Q : readonly 和 disabled 的区别
1、readonly ，是只读的意思，是允许提交给服务器，不让用户改数据而已
2、disabled ， 是禁用的意思，不仅不让用户改数据，而且还不能提交给服务器
3、placeholder
占位符，即默认显示在文本框用于给用户提示的文字
1、提交按钮
作用：将表单提交给服务器
标记：<
input
type="submit" value="显示的文本">
2、重置按钮
作用：将表单恢复到初始化的状态
标记：<
input
type="reset" value="显示的文本">
3、普通按钮
作用：通过 JS 自定义功能
标记：<
input
type="button" value="显示的文本">
4、显示的内容
1、type ：submit / reset / button
4、单选按钮 和 复选框
单选按钮：<
input
type="radio">
复选框：<
input
type="checkbox">
1、name
设置名称，并用于分组，一组单选按钮 或 复选框的名称必须相同
2、value
3、checked
默认被选
中
，无值属性
5、隐藏域 和 文件选择框
1、隐藏域
<
input
type="hidden" name="" value="">
想提交给服务器，但不想给用户看的数据，可以放在隐藏域
中
2、文件选择框
<
input
type="file" name="">
1、form的 method 属性值必须为 post
2、form的 enctype属性值必须为 multipart/form-data
http://localhost/02-
HTML
/Day02/login.php?uname=wenhua.li&upwd=bingbing
http://localhost/02-
HTML
/Day02/login.php?uname=wenhua.li&upwd=fengjie&gender=1&question=0&question=1&question=2&question=3
http://localhost/02-
HTML
/Day02/login.php?uname=wenhua.li&upwd=fdsafdsafdsa&gender=0&question=0&question=1&question=2&question=3&uid=10000567789
1、form ...
2、
input
...
3、textarea 控件
标记：<textarea></textarea>
1、name
定义名称，提交给服务器使用
2、cols
指定文本域的列数，变相指定宽
3、rows
指定文本域的行数，变相指定高
4、readonly
Demo :
创建 01-form.
html
文件
创建一个 多行文本域，列数为 50，行数为 5，名称为 intro
4、选项框
表示 下拉列表 或 滚动列表
列表
中
的内容，允许出现多个
1、name ：控件的名称
2、size ：默认显示选项的数量，默认为1，为下拉列表，如果取值>1的话，则为滚动列表
3、multiple
设置多选，无值的属性
1、value ：选项的值，提交给服务器用
2、selected ：默认被选
中
5、其它标记
1、label 元素
作用：关联文本与表单控件的，点击文本时就如同点击表单控件一样
标记：文本
1、for
指定要关联的表单控件的ID值
2、为控件分组
分组
中
的内容
3、浮动框架
将其他页面导入到当前页面
中
来
标记：<iframe></iframe>
1、src
要引入的页面的url
2、frameborder
指定浮动框架的边框，默认为1，则显示边框
不需要边框则设置为 0
3、width
4、height
创建一个 02-iframe 的网页，将 01-form.
html
页面引入进来 ，适当调整宽度，高度，边框
6、新
input
元素 (
HTML
5)
1、电子邮件类型
作用：提交时会验证数据是否符合Email的规范
标记：<
input
type="email">
2、搜索类型
作用：在文本框的基础上，提供了快速清除操作
标记：<
input
type="search">
3、URL类型
作用：提交时会验证数据是否符合Web站点的URL规范(绝对路径)
标记：<
input
type="url">
4、电话号码类型
作用：在移动端设备
中
，能展开 拨号键盘，在PC
中
无效
标记：<
input
type="tel">
5、数字类型
作用：只能让用户输入 或 选择数字
标记：<
input
type="number">
1、min ：当前控件接受的最小值
2、max ：当前控件接受的最大值
3、step ：微调数字时每次变化的
长度
,默认为1
6、范围类型
作用：提供一个滑块，让用户选择数字
标记：<
input
type="range">
1、min ：当前控件的最小值
2、max ：当前控件的最大值
3、value ：设定初始值
7、颜色类型
作用：提供一个颜色拾取控件
语法：<
input
type="color">
8、日期类型
作用：提供一个日期输入控件
标记：<
input
type="date">
9、周类型
作用：提供一个日期控件，用于选取周
标记：<
input
type="week">
10、月份类型
作用：选取月份控件
标记：<
input
type="month">
=============================
