9-1 创建表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建表单</title>
</head>
<body>
<!--form标签用于创建一个表单,会将里面的内容一起发送给服务器-->
<!--结构类似于表格-->
<!--表单中的其他元素都要包含在form标签中-->
<!--form元素属性:-->
<!--1.必须,action指定表单发送的地址(服务器地址)-->
<!--2.method:表单数据发送至服务器的方法,常用的有两种:get/post,默认get-->
<form action="服务器地址" method="get">
</form>
</body>
</html>
9-2 表单提交
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交</title>
</head>
<body>
<!--form标签用于创建一个表单,会将里面的内容一起发送给服务器-->
<!--结构类似于表格-->
<!--表单中的其他元素都要包含在form标签中-->
<!--form元素属性:-->
<!--1.必须,action指定表单发送的地址(服务器地址)-->
<!--2.method:表单数据发送至服务器的方法,常用的有两种:get/post,默认get-->
<!--3.name:用来为当前表单定义一个独一无二的名称,控制表单与后台程序之间的关系-->
<!--4.novalidate:设置数据提交时不进行验证,通常不会用到-->
<!--5.target:设置目标窗口打开方式,通常不会用到-->
<form action="https://www.51zxw.net" method="get" name="51zxw" >
<input type="text" name="uname" id="uname" value="请输入..." />
<input type="submit" value="发送" />
</form>
</body>
</html>
9-3 get/post区别
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>get/post区别</title>
</head>
<body>
<!--get/post区别-->
<!--get方法提交:数据会附在网址之后,提交给服务器,不安全,数据量很小,-->
<!--post方法提交:数据不会附在网址之后,会将表单中的所有数据进行打包发送服务器,等待服务器读取,安全的过程,数据量不受限制,是使用最多的提交方法-->
<form action="https://www.51zxw.net" method="get" name="51zxw" >
<input type="text" name="uname" id="uname" value="请输入..." />
<input type="submit" value="发送" />
</form>
<form action="https://www.51zxw.net" method="post" name="51zxw" >
<input type="text" name="myname" id="myname" value="请输入..." />
<input type="submit" value="发送" />
</form>
</body>
</html>
9-4 本地安装服务器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>本地安装服务器</title>
</head>
<body>
<!--本地安装服务器环境:-->
<!--1.下载phpstudy软件,点击安装-->
<!--2.打开软件,启动"套件"中的前三项-->
<!--3.打开浏览器,地址栏输入“127.0.0.1”,回车-->
<!--4.看到“站点创建成功”,表示本地安装服务器环境成功-->
<!--5.把程序目录中的“www文件夹”发送到桌面-->
</body>
</html>
9-5 表单发送
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单发送</title>
</head>
<body>
注意:
1.表单接收程序,必须要放在服务器环境中
2.表单发送地址,一定要填写完整,加上http://
<form action="http://127.1.1.1/51zxw.php" method="post">
<input type="text" name="uname" />
<input type="submit" />
</form>
</body>
</html>
9-6 type和name属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>type和name属性</title>
</head>
<body>
<!--1.input元素是最常用的表单控件-->
<!--2.input元素不仅仅可以在form表单中使用,还可以在表单之外使用-->
<!--input元素的type属性(必须要有):-->
<!--1.指定输入内容的类型-->
<!--2.默认为text,单行文本框-->
<!--input元素的name属性(必须要有):-->
<!--1.传递参数时的参数名称-->
<!--2.表单接收找的就是name属性值-->
<form action="http://127.1.1.1/51zxw.php" method="post">
<input type="text" name="uname" />
<input type="submit" />
</form>
</body>
</html>
9-7 value和placeholder属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>value和placeholder属性</title>
</head>
<body>
<!--1.input元素是最常用的表单控件-->
<!--2.input元素不仅仅可以在form表单中使用,还可以在表单之外使用-->
<!--input元素的value属性(非必须):-->
<!--1.输入框中的默认值-->
<!--2.value值会发送到服务器-->
<!--input元素的placeholder属性(非必须):-->
<!--1.输入框中的默认值,当文本框在获得焦点时,默认值会被清空-->
<!--2.placeholder中的值不会发送到服务器-->
<form action="http://127.1.1.1/51zxw.php" method="post">
<!--<input type="text" name="abc" value="请输入。。。"/>-->
<input type="text" name="abc" placeholder="请输入。。。"/>
<input type="submit" value="确定" />
</form>
</body>
</html>
9-8 maxlength和disabled属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>maxlength和disabled属性</title>
</head>
<body>
<!--1.input元素是最常用的表单控件-->
<!--2.input元素不仅仅可以在form表单中使用,还可以在表单之外使用-->
<!--input元素的maxlength属性(非必须):-->
<!--1.用来控制输入的最大字数-->
<!--2.包括英文、数字、汉字等-->
<!--input元素的disabled属性(非必须):-->
<!--1.设置为不可用,不可操作,不能修改,不提交到服务器-->
<!--2.用于格式提示-->
<form action="http://127.1.1.1/51zxw.php" method="post">
<!--<input type="text" name="abc" placeholder="请输入电话号码" maxlength="11"/>-->
格式提示:<input type="text" placeholder="xx省xx市xx区xx号" disabled="disabled"/>
<br />
输入地址:<input type="text" name="abc" placeholder="请输入地址" />
<input type="submit" value="确定" />
</form>
</body>
</html>
9-9 autofocus和disabled属性(仅作了解)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>autofocus和disabled属性(仅作了解)</title>
</head>
<body>
<!--1.input元素是最常用的表单控件-->
<!--2.input元素不仅仅可以在form表单中使用,还可以在表单之外使用-->
<!--input元素的autofocus属性(非必须):-->
<!--1.让输入框自动获得焦点。-->
<!--2.打开页面以后,光标自动处于编辑状态-->
<!--input元素的autocomplete属性(非必须):-->
<!--1.属性值:on/off-->
<!--2.定义是否开启浏览器自动记忆功能-->
<form action="http://127.1.1.1/51zxw.php" method="post">
<!--<input type="text" name="abc" placeholder="请输入。。。" autofocus="autofocus" />-->
<input type="text" name="abc" placeholder="请输入。。。" autocomplete="on"/>
<input type="submit" value="确定" />
</form>
</body>
</html>
9-10 单行文本框和密码输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单行文本框和密码输入框</title>
</head>
<body>
<!--input元素的type属性(非必须):-->
<!--单行文本框:
1.type="text"
2.可以输入任何类型的文本:数字,汉字,字母
3.输入的内容以单行显示
-->
<!--密码输入框框:
1.type="password"
2.输入的字符会以小圆点或者星号显示
3.输入的内容会被隐藏
-->
<form action="http://127.1.1.1/51zxw.php" method="post">
用户名:<input type="text" name="uname" />
<br />
密码:<input type="password" name="password"/>
<input type="submit" />
</form>
</body>
</html>
9-11 提交按钮和重置按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提交按钮和重置按钮</title>
</head>
<body>
<!--input元素的type属性(非必须):-->
<!--提交按钮:
1.type="submit"
2.点击后将数据发送到服务器
3.可以用value来改变按钮的名称
-->
<!--重置按钮:
1.type="reset"
2.点击后将清空输入框中的内容
3.可以用value来改变按钮的名称
-->
<form action="http://127.1.1.1/51zxw.php" method="post">
用户名:<input type="text" name="uname" />
<br />
密码:<input type="password" name="password"/>
<input type="submit" value="发送"/>
<input type="reset" value="重写"/>
</form>
</body>
</html>
9-12 普通按钮和隐藏域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>普通按钮和隐藏域</title>
</head>
<body>
<!--input元素的type属性(非必须):-->
<!--普通按钮:
1.type="button"
2.定义的是一个可以点击的按钮,但是没有任何行为,也没有任何样式
3.可以用value来改变按钮的名称
4.常用于点击按钮时来启动js程序
-->
<!--隐藏域:
1.type="hidden"
2.隐藏域不会显示在页面中,一般是网页设计者设置好的数据
3.表单提交的时候隐藏域中的value会提交到服务器
-->
<form action="http://127.1.1.1/51zxw.php" method="post">
用户名:<input type="text" name="uname" />
<br />
密码:<input type="password" name="password"/>
<br />
<input type="hidden" name="xjd" value="小家电"/>
<br />
<input type="submit" />
<input type="reset" />
<input type="button" value="普通按钮"/>
</form>
</body>
</html>
9-13 数字输入框和活动条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数字输入框和活动条</title>
</head>
<body>
<!--input元素的type属性(非必须):-->
<!--数字输入框:
1.type="number"
2.专门用来输入数字,其他类型不能输入
3.min:允许输入的最小值
4.max:允许输入的最大值
5.step:步长
-->
<!--活动条:
1.type="range"
2.专门用来输入数字,其他类型不能输入
3.min:允许输入的最小值
4.max:允许输入的最大值
5.step:步长
-->
<form action="https://www.51zxw.net" method="get">
<input type="number" name="abc" value="10" min="5" max="20" step="5"/>
<br />
<input type="range" name="bcd" value="10" min="10" max="80" step="5"/>
<input type="submit" />
</form>
</body>
</html>
9-14 时间输入框和颜色选择器和文件域(了解就行)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时间输入框和颜色选择器和文件域(了解就行)</title>
</head>
<body>
<!--input元素的type属性(必须要有):-->
<!--时间输入框:
1.type="time/datetime/datetime-local/date/month/week"
-->
<!--颜色选择器:
1.type="color"
2.专门用来选择颜色的
-->
<!--文件域:
1.type="file"
2.用于文件上传
3.accept:规定选取文件的类型
4.multiple:规定一次允许选择多个文件
-->
<form action="https://www.51zxw.net" method="get">
<input type="datetime-local" name="abc" />
<br />
<input type="color" name="bcd"/>
<br />
<input type="file" name="" accept="image/jpeg" multiple="multiple"/>
<input type="submit" />
</form>
</body>
</html>
9-15 单选框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单选框</title>
</head>
<body>
<!--input元素的type属性(必须要有):-->
<!--单选框:
1.type="radio"
2.name属性值必须设置成相同的属性值
3.向服务器发送的值是value值
4.可以通过checked设置默认选取状态,再次单击取消选取
-->
<form action="https://www.51zxw.net" method="get">
性别:<input type="text" name="uname" />
<br />
<input type="radio" name="sex" value="男" checked="checked"/> 男
<input type="radio" name="sex" value="女"/> 女
<input type="radio" name="sex" value="人妖"/> 人妖
<input type="submit" />
</form>
</body>
</html>
9-16 复选框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复选框</title>
</head>
<body>
<!--input元素的type属性(必须要有):-->
<!--单选框:
1.type="checkbox"
2.name属性值必须设置成相同的属性值,在属性值后加上中括号成为数组(很关键)
3.向服务器发送的值是value值
4.可以通过checked设置默认选取状态,再次单击取消选取
-->
<form action="http://127.0.0.1/51zxw2.php" method="post">
喜欢的水果:<input type="text" name="uname" />
<br />
<input type="checkbox" name="fruit[]" value="苹果" checked="checked"/> 苹果
<input type="checkbox" name="fruit[]" value="香蕉"/> 香蕉
<input type="checkbox" name="fruit[]" value="西瓜"/> 西瓜
<input type="submit" />
</form>
</body>
</html>
9-17 电子邮箱
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电子邮箱</title>
</head>
<body>
<!--input元素的type属性(必须要有):-->
<!--电子邮箱输入框:
1.type="email"
2.会对输入的内容进行验证,符合可以发送,不符合弹出提示框
-->
<!--网址输入框:
1.type="url"
2.会对输入的内容进行验证,符合可以发送,不符合弹出提示框
3.输入的网址一定要包含协议 http://或者https://
-->
<form action="https://www.51zxw.net" method="post">
单行输入:<input type="text" name="abc"/>
<br />
电子邮箱:<input type="email" name="email" />
<br />
网址:<input type="url" name="url" />
<input type="submit" />
</form>
</body>
</html>
9-18 表单验证属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证属性</title>
</head>
<body>
<!--input元素的type属性(必须要有):-->
<!--pattern属性:
1.规定字符输入的模式
2.模式指的是:正则表达式
3.会对输入的内容进行验证,符合可以发送,不符合弹出提示框
-->
<!--required属性:
1.必须在提交前填写输入字段,不填写不能提交
-->
<form action="https://www.51zxw.net" method="get">
单行输入:<input type="text" name="abc" pattern="[0-9]{11}" />
<br />
单行输入2:<input type="text" name="abc" placeholder="必须填写" required="required"/>
<br />
<input type="submit" />
</form>
</body>
</html>
9-19 多行文本输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文本输入框</title>
</head>
<body>
<!--多行文本输入框:
1.textarea标签
2.文本输入区域可以容纳无限数量的文本
3.多行文本输入框和单行文本输入框的属性差不多
4.不要使用rows和cols设置多行文本输入框的行数和列数,不太精准;应使用css设置宽高
5.可以在表单(form)之外使用
-->
单行文本输入框:<input type="text" />
多行文本输入框:<textarea name="" style="width: 200px;height: 150px;"> </textarea>
</body>
</html>
9-20 下拉列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
</head>
<body>
<!--
select:
1.表示创建下拉列表
2.可以通过size属性设置列表中显示多少个项
option:
1.表示每一个下拉列表项
2.往服务器中发送的是value值
-->
<form action="https://www.51zxw.net" method="get">
<select name="abc" size="3">
<option value="a">辽宁</option>
<option value="b">吉林</option>
<option value="c">黑龙江</option>
<option value="d">长沙</option>
<option value="e">常德</option>
<option value="f">岳阳</option>
</select>
<input type="submit" value="提交"/>
</form>
</body>
</html>
9-21 下拉列表分组多选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表分组多选</title>
</head>
<body>
<!--
select:
1.表示创建下拉列表
2.可以通过size属性设置列表中显示多少个项
3.multiple属性可以定义多选
4.多选时,name属性值后应加上中括号"[]"
option:
1.表示每一个下拉列表项
2.往服务器中发送的是value值
optgroup:
1.用来对option进行分组
2.使用label属性设置分组名称
-->
<form action="http://127.0.0.1/51zxw3.php" method="post">
到过的省市:<br />
<select name="abc[]" size="3" multiple="multiple">
<optgroup label="东北">
<option value="a">辽宁</option>
<option value="b">吉林</option>
<option value="c">黑龙江</option>
</optgroup>
<optgroup label="湖南">
<option value="d">长沙</option>
<option value="e">常德</option>
<option value="f">岳阳</option>
</optgroup>
</select>
<input type="submit" value="提交"/>
</form>
</body>
</html>
9-22 button按钮(标签)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>button按钮(标签)</title>
</head>
<body>
button按钮:
1.type属性:可以设置三个值,submit/reset/button,含义和input按钮一样
2.name/value/disabled属性,与input的用法一样
3.button标签是双标签,进行更加复杂的样式设计
4.注意:如果是在表单中请使用input按钮,表单外使用button
<form action="https://www.51zxw.net" method="get">
<input type="text" name="abc"/>
<input type="submit" value="提交"/>
<input type="reset" value="重置" />
<input type="button" value="普通"/>
<br />
<br />
<button type="submit">提交(button)</button>
<button type="reset">重置(button)</button>
<button type="button">普通(button)</button>
</form>
</body>
</html>
9-23 表单实战
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单实战1</title>
</head>
<body>
<form action="" method="post">
姓名*:<input type="text" name="user" required/> <br /><br />
密码*:<input type="password" name="pwd" required/> <br /><br />
性别*:<input type="radio" name="sex" value="0" required/>男
<input type="radio" name="sex" value="1" required/>女
<br /><br />
年龄*:<input type="number" name="age" min="0" max="120" required/> <br /><br />
课程*:<input type="checkbox" name="kc[]" value="k1"/>课程1
<input type="checkbox" name="kc[]" value="k2"/>课程2
<input type="checkbox" name="kc[]" value="k3"/>课程3
<br /><br />
手机*:<input type="text" name="tel" pattern="[0-9]{11}" required/><br /><br />
城市*:<select name="city1" required>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<select name="city2" required>
<option value="xx">xx区</option>
<option value="yy">yy区</option>
</select>
<br /><br />
住址:<input type="text" name="addr" /> <br /><br />
备注:<textarea name="bz" style="width: 200px;height: 100px;">输入....</textarea>
<br /><br />
<input type="submit" />
<input type="reset" />
</form>
</body>
</html>