前端基础小标签4
第一部分
部分摘要于网络
一、
form表单:所有希望提交给服务器的数据都必须放在form表单里面
表单提交:
1.可以通过按钮提交
2.通过js提交
3.通过图片提交
action: 表单提交的地址
method: 请求方式
get请求和post请求的区别:
get请求:
1.地址栏输入
2.form表单没有指定method属性
3.method属性为get
get请求传输的数据量较小,一般不能大于2KB
请求参数直接拼接在URL后面，不安全
POST请求:
1.设置请求方式post
post请求数据量大小不受限制,但往往取决于服务器的限制
post请求发送的请求参数以及对应的值放在HTML HEADER中传输，地址栏上看不到,安全性较高
开发中一般都是post
关于 "get" 方法的注释：
- 该方法将表单数据以名称/值对的形式附加到 URL 中
- 该方法对于用户希望加入书签的表单提交很有用
- URL 的长度是有限的（不同浏览器限制不一样），因此，您不能确定是否所有的表单数据都能被正确传输
- 绝不要使用 "get" 方法来发送敏感数据！（比如密码或者其他敏感信息，在浏览器的地址栏中是可见的）、
关于 "post" 方法的注释：
- 该方法将表单数据以 HTTP post 事务的形式发送
- 通过 "post" 方法提交的表单不能加入书签
- "post" 方法比 "get" 更安全，且 "post" 没有长度限制
二、
表单标签：
实例1：
文本、密码、
<!--如果没有指定表单标签的类型，那么默认就是输入框 -->
<input /><br />
<!-- 文本输入表单 -->
<input type="text" value="请输入姓名:" size="22" name="username"/><br />
<!-- 密码输入表单 -->
<!-- 设置文本输入框的长度 : size
设置文本输入框的内容长度: maxlength
-->
<input type="password" name="pwd" id="" size="22" maxlength="10"/>
实例2：
单选：
<!--
name属性需要保持一致才能够达到单选的效果
向服务器提交的数据是 name和value的值
-->
<form action="testform.html" method="get">
性别:
<label for="male">男</label>
<input type="radio" name="gender" id="male" value="male" />
<label for="female">女</label>
<input type="radio" name="gender" id="female" value="female" /><br />
<input type="submit" value="提交" />
</form>
<!--
复选框是一键多值
-->
<form action="testform.html" method="get">
<label for="playbasketball">打篮球</label>
<input type="checkbox" name="hobby" id="playbasketball" value="playbasketball" />
<label for="playfootball">踢足球</label>
<input type="checkbox" name="hobby" id="playfootball" value="playfootball" />
实例3：
复选：
<label for="playLOL">打LOL</label>
<input type="checkbox" name="hobby" id="playLOL" value="playLOL" />
<input type="submit" value="提交"/>
</form>
实例4：
下拉：
<form action="testform.html" method="get">
<label for="game">游戏</label>
<select name="game" id="game">
<option value="LOL">LOL</option>
<option value="CS">CS</option>
<option value="CAR">跑跑卡丁车</option>
<option value="MS">魔兽</option>
<option value="XJ">星际</option>
</select>
<input type="submit" value="提交"/>
</form>
实例5：
提交、重置、普通按钮：
<!--
提交按钮提交的相关信息:
http://127.0.0.1:8020/day38_html02/html/testform.html
?username=amdin&pwd=123&gender=male&hobby=playbasketball&hobby=playLOL&game=MS
<input type="button" name="" id="" value="点一下" />
type=button:一般用来触发点击事件，调用函数
<input type="reset" name="" id="" value="重置" />
恢复到初始的状态，初始状态指的是网页第一次加载保存的数据记录
checked:默认选中
selected: 默认被选择
-->
<form action="testform.html" method="get">
<!-- 文本输入表单 -->
<input type="text" value="dalsjdaj" size="22" name="username" placeholder="请输入姓名:"/><br />
<!-- 密码输入表单 -->
<!-- 设置文本输入框的长度 : size
设置文本输入框的内容长度: maxlength
-->
<input type="password" name="pwd" id="" size="22" maxlength="10"/>
<hr />
性别:
<label for="male">男</label>
<input type="radio" name="gender" id="male" value="male" checked/>
<label for="female">女</label>
<input type="radio" name="gender" id="female" value="female" /><br />
<hr />
<label for="playbasketball">打篮球</label>
<input type="checkbox" name="hobby" id="playbasketball" value="playbasketball" />
<label for="playfootball">踢足球</label>
<input type="checkbox" name="hobby" id="playfootball" value="playfootball" />
<label for="playLOL">打LOL</label>
<input type="checkbox" name="hobby" id="playLOL" value="playLOL" />
<hr />
<label for="game">游戏</label>
<select name="game" id="game">
<option value="LOL">LOL</option>
<option value="CS">CS</option>
<option value="CAR">跑跑卡丁车</option>
<option value="MS" selected>魔兽</option>
<option value="XJ">星际</option>
</select><br />
<input type="submit" value="提交"/>
<input type="button" name="" id="" value="点一下" onclick="alert('我被点了');"/>
<input type="reset" name="" id="" value="重置" />
<input type="image" name="" id="" value="" src="../img/logo.png"/>
</form>
实例6：
文本域：
<!-- 文本域 -->
<form action="testform.html" method="get">
<h3>个人简介</h3>
<p>
<textarea name="textrows" rows="20" cols="50">个人简介...
</textarea>
</p>
<input type="submit" value="提交"/>
</form>
*实例7：
文件表单：
<!--
如果表单中有文件表单，那么form必须加上 enctype="multipart/form-data"
-->
<form action="testform.html" method="get" enctype="multipart/form-data">
<h3>选择文件</h3>
<!-- 普通表单: 和我们之前学习的表单一模一样-->
<input type="text" name="" id="" value="" />
<p>
<!--文件表单 -->
<input type="file" name="upload" value="上传" />
</p>
<input type="submit" value="提交"/>
</form>
实例8：
邮箱：
<form action="testform.html" method="get">
<h3>邮箱</h3>
邮箱:<input type="email" name="email" id="email" value="" />
<input type="submit" value="提交"/>
</form>
实例9：
url表单：
<!--
url表单:校验网址
-->
<form action="testform.html" method="get">
<h3>url网址</h3>
网址:<input type="url" name="url" id="url" value="" />
<input type="submit" value="提交"/>
</form>
实例10：
数字表单：
<!-- 数字表单 -->
<form action="testform.html" method="get">
<h3>数字校验</h3>
<input type="number" name="num" id="num" step="3" min="0" max="18"/>
<input type="submit" value="提交"/>
</form>
实例11：
滑块：
<form action="testform.html" method="get">
<h3>滑块表单</h3>
<input type="range" name="range" id="" value="" min="0" max="10" step="2"/>
<input type="submit" value="提交"/>
</form>
实例12：
搜索：
<form action="testform.html" method="get">
<h3>搜索表单</h3>
<input type="search" name="search" id="" placeholder="请输入..."/>
<input type="submit" value="提交"/>
</form>
实例13：
隐藏：
商品详情页面给每个商品ID隐藏，但传入后台要传入每个商品ID便于落地
<form action="testform.html" method="get">
<h3>隐藏域表单</h3>
<p>
<label for="goodsname">商品名称</label>
<input type="text" name="goodsname" id="goodsname" value="" />
</p>
<p>
<label for="goodstype">商品种类</label>
<input type="text" name="goodstype" id="goodstype" value="" />
</p>
<input type="hidden" name="goodid" id="goodid" value="1001" />
<input type="submit" value="提交"/>
</form>
实例14：
颜色选择器、日期选择器
<!--color-->
<input type="color" name="color" id="color" value="" onclick="alert(document.getElementById('color').value)"/>
<!--date-->
<input type="date" name="date" id="date" value="" onclick=""/>
</body>
<script type="text/javascript">
var date = document.getElementById("date");
document.write(date.value);
</script>
实例15：
表单校验：
<!--
表单的校验:
1.前端校验
就是防止用户输入不合法的信息，能够减轻服务器端的压力
placeholder
2.后台校验
通过Java代码来做相应的判断
3.数据库校验
数据库可以在插入数据的时候做校验
-->
不能为空：required
允许输入最大数值：max
允许输入最小数值：min
文本框长度：size(字符)
使用正则：pattern=”正则”
三、
正则
正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。
普通字符
普通字符包括没有显式指定为元字符的所有可打印和不可打印字符。这包括所有大写和小写字母、所有数字、所有标点符号和一些其他符号。
非打印字符
非打印字符也可以是正则表达式的组成部分。下表列出了表示非打印字符的转义序列：
|
字符 |
描述 |
|
\cx |
匹配由x指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。 |
|
\f |
匹配一个换页符。等价于 \x0c 和 \cL。 |
|
\n |
匹配一个换行符。等价于 \x0a 和 \cJ。 |
|
\r |
匹配一个回车符。等价于 \x0d 和 \cM。 |
|
\s |
匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。 |
|
\S |
匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。 |
|
\t |
匹配一个制表符。等价于 \x09 和 \cI。 |
|
\v |
匹配一个垂直制表符。等价于 \x0b 和 \cK。 |
特殊字符
所谓特殊字符，就是一些有特殊含义的字符，如上面说的 runoo*b 中的 *，简单的说就是表示任何字符串的意思。如果要查找字符串中的 * 符号，则需要对 * 进行转义，即在其前加一个 \: runo\*ob 匹配 runo*ob。
许多元字符要求在试图匹配它们时特别对待。若要匹配这些特殊字符，必须首先使字符"转义"，即，将反斜杠字符\ 放在它们前面。下表列出了正则表达式中的特殊字符：
|
特别字符 |
描述 |
|
$ |
匹配输入字符串的结尾位置。如果设置了 RegExp 对象的 Multiline 属性，则 $ 也匹配 '\n' 或 '\r'。要匹配 $ 字符本身，请使用 \$。 |
|
( ) |
标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符，请使用 \( 和 \)。 |
|
* |
匹配前面的子表达式零次或多次。要匹配 * 字符，请使用 \*。 |
|
+ |
匹配前面的子表达式一次或多次。要匹配 + 字符，请使用 \+。 |
|
. |
匹配除换行符 \n 之外的任何单字符。要匹配 . ，请使用 \. 。 |
|
[ |
标记一个中括号表达式的开始。要匹配 [，请使用 \[。 |
|
? |
匹配前面的子表达式零次或一次，或指明一个非贪婪限定符。要匹配 ? 字符，请使用 \?。 |
|
\ |
将下一个字符标记为或特殊字符、或原义字符、或向后引用、或八进制转义符。例如， 'n' 匹配字符 'n'。'\n' 匹配换行符。序列 '\\' 匹配 "\"，而 '\(' 则匹配 "("。 |
|
^ |
匹配输入字符串的开始位置，除非在方括号表达式中使用，此时它表示不接受该字符集合。要匹配 ^ 字符本身，请使用 \^。 |
|
{ |
标记限定符表达式的开始。要匹配 {，请使用 \{。 |
|
| |
指明两项之间的一个选择。要匹配 |，请使用 \|。 |
限定符
限定符用来指定正则表达式的一个给定组件必须要出现多少次才能满足匹配。有 * 或 + 或 ? 或 {n} 或 {n,} 或 {n,m} 共6种。
正则表达式的限定符有：
|
字符 |
描述 |
|
* |
匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。 |
|
+ |
匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。 |
|
? |
匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 、 "does" 中的 "does" 、 "doxy" 中的 "do" 。? 等价于 {0,1}。 |
|
{n} |
n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。 |
|
{n,} |
n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。 |
|
{n,m} |
m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。 |
实用正则系列：https://www.cnblogs.com/fozero/p/7868687.html
