实现交互：
背景
- 什么是表单
- 表单如何工作，表单在浏览器中如何工作（什么是控件）
具体操作
- <form>语法,post和get区别（外观上,本质上）
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
神马是表单？
实际上就是一个包含输入域的Web页面,允许你输入信息.提交表单时,信息会被浏览器打包发送到Web服务器,由服务器中的一个脚本来处理.
然后你会得到另外一个Web页面作为响应.
表单如何工作?
- 通过浏览器，我们访问了一个包含HTML表单的页面,填写表单并提交
- 浏览器打包表单数据，发给Web服务器
- Web服务器收到表单数据，然后把数据传给一个服务器脚本进行处理
- 服务器脚本处理完表单数据，然后创建一个全新的HTML页面作为响应，再将这个页面传给Web服务器
- Web服务器把服务器脚本的响应（就是那个html页面）发回给浏览器，浏览器显示html页面
表单在浏览器中工作?
- 首先浏览器会加载页面.对浏览器而言,表单只是页面中的html,当浏览器加载页面的html，遇到表单元素时，它会在页面上创建控件，允许你输入各种各样的数据。控件就是类似按钮，文本输入框，下拉菜单之类的工具。
- 你输入数据.比如可以在文本控件中输入文本,在复选框控件中单击一个选项
- 你提交表单.单机提交按钮控件，提交表单.浏览器此时就会打包所有数据,并把这些数据发送给服务器.
- 服务器响应.服务器得到表单数据后并把这些数据传给相关的服务器脚本处理,最后返回给浏览器一个全新的HTML页面.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <form>语法
<formaction="F:/chapter14/contest/contest.php" method="POST"> (处理表单数据的php) method属性确定表单数据如何发送到服务
First name:<input type="text"name="lastname" value=""><br> "text"在浏览器页面创建一个单行控件 每个<input>元素都需要自己名字,服务器脚本将使用该元素名.
Last name:<input type="text"name="lastname"value=""><br>
</form>
- 各个表单元素<input>的name都是唯一的,浏览器将数据打包发给服务器时,服务器脚本要求这些表单有相应的标签,这样才能分清谁是谁.
- 浏览器向服务器发送数据有两种方法:POST和GET
POST和GET区别 从外观上 Post 会打包你的表单变量，在后台将它们发送到服务器; Get 也会打包你的表单变量,但会把这些数据追加到URL最后,然后发给服务器
本质上 Get:查看当前时事的表单;
- 允许用户对提交表单后的结果页面加书签
Post:输入用户名和口令/订购CD/提交书评/按身份证号查福利/发送客户反馈的表单;
- 多用于处理订单的服务器脚本，此时并不希望用户能对页面添加书签，因为如果允许，每次返回到这个书签时，都会重新提交该订单。
- 表单数据是私密的,涉及信用卡口令神马的，使用get别人可以通过url看到
- 如果使用了<textarea>，就应该使用post，因为可能会发送大量数据.Post的限制比较宽松.
-------------------------------------------------------下面的控件都是放在<form></form>中的----------------------------------------------------------------------------------------------------------------
输入单行文本框
<input type="text" name="lastname" value="">
输入多行文本框
<textarea name="comments"rows="10"cols="48">请输入文本</textarea>
输入密码框
<input type="password" name="lastname" value="">
单选钮
<input type="radio" name="color"value="red"checked>checked会被默认选定
<input type="radio" name="colot"value="green">
- 相关的选项共用一个名字,才能实现单选
- value是提交数据到服务器的值（后台程序PHP使用）
- name为控件命名，以备后台程序 ASP、PHP 使用
复选框(多选框)
<input type="checkbox"name="spicevalue="salt"checked>
<input type="checkbox"name="spice"value="pepper">相关的复选框共用一个名字
<input type="checkbox"name="spice"value="garlic">
提交
<input type="submit"value="一键下单">
- 按钮的默认标签为submit,也可能是submit Query
重置
<input type="reset" value="重置">
文本区
<textarea name="comments"rows="10"cols="48">请在此输入评论</textarea>这段文本会成为浏览器文本区控件中的初始文本
- 注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。
- input可以通过 maxlength='100"来限定字符数,但对于<textarea>,在html中没有办法限制用户输入多少文本.
select和option一起用来创建下拉菜单 <select name="characters">
<option value="Buckaroo"selected>这段文字则出现在菜单中栏中</option>
<option value="Tommy">Perfect Tommy</option>
<option value="Penny">Penny Priddy</option>
<option value="Jersey">New Jersey</option>
<option value="John">John Parker</option>
</select>
- <select>在Web页面创建一个菜单控件,允许用户从一组选项中选择.
- selected默认自动选择，区分下 input 中 用 checked, select 则用 selected
- <option>value是向服务器提交的值元素
- 提交表单时,只会把当前选择的选项连同这个名字发给服务器
- 在<select>中增加布尔属性multiple="multiple",就可以把下拉式单选菜单变成多选菜单.这时按Ctrl可以实现多选.
-
html表单实现交互,控件,可访问性<label>
数字输入 <input type="number" min="0" max="20"step="2">
- 使用max和min来限制允许输入的数字.step是可选的用来指定值的间隔数（步长）
范围输入(滑动条)
<input type="range"min="0" max="20"step="5">
颜色输入 <input type="color">
日期输入 <input type="date" name="date">
email/tel/url/ 输入 <input type="email/tel/url">
- 这三种都是<input> type的变形，浏览器上看不出任何差别，但在移动浏览器上它们会得到一个定制的键盘,可以更便捷地输入需要的字符如/、@和数字.
- 不是所有浏览器都支持这些输入类型
增强可访问性，使用<label>
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
<label>可提供页面结构的更多信息,使你能更容易地使用CSS对标签设置样式,对于有视力障碍的人,也有助于他们使用的屏幕阅读器更准确地标识表单元素.
例子:
<input type="radio"name="hotornot"value="not">
<input type="radio" name="hotorno"value="green">
使用<label>前，先为表单元素增加一个id属性
<input type="radio" name="hotornot" value="hot"id="hot"> <label for="hot">hot</label>
<input type="radio" name="hotornot" value="not"id="not"> <label for="not">not</label>
- 每个控件中 name 和 id 的值可以相同；id值必须和label for的值相同
- 每个控件的id值必须是唯一的
表单中的其他元素
视觉上分组
<fieldset>
<legend>thermoster: </legend>
<input type="radio" name="hotornot" value="hot" id="hot"> <label for="hot">hot</label>
<input type="radio" name="hotornot" value="not" id="not"> <label for="not">not</label>
</fieldset>
passwords
<input type="password" name="secret" >
- 表单数据不会采用一种安全的方式从浏览器发送到服务器脚本.提高安全性请联系托管公司
<input type="file"name="doc">
placehoder
<input type="text"placeholder="在此处填姓名">
- 如果这个域仍保持空白,提交表单时占位内容不会作为控件值提交.
<input type="text" placeholder ="在此处填姓名"required>
- 如果这个域仍保持空白,表单不能提交.
m mi 密 1