<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>第四课时</title>
</head>
<body>
<h1 style="text-align: center">表单的应用</h1>
<form action="test.html" method="get" id="formid">
<!--action用来指定表单数据要提交到哪里去，就是submit按钮的提交数据。
method指定网络请求的方式，默认的方式就是get请求。
1.get请求，传递到服务端的数据，追加到url路径后的方式发送。
规则：所有数据都在问号之后，多个数据以&符号分隔开。
缺点：网络请求数据暴露在url里，敏感的数据容易被窃取。数据传输量较小。
2.post请求，传递到服务器端的数据隐藏在请求体里，隐藏敏感数据。
优点：数据传输的隐蔽性好。
数据传输量基本上不存在上限。-->
<fieldset>
<!--fieldset 外框，做分区，将不同的区域分隔开。-->
<legend>用户注册</legend>
<!--legend 外框的标题-->
<table>
<tr>
<td>o_0</td>
<td><input type="text" name="name" tabindex="1"
autocomplete="on"
autofocus required placeholder="请输入用户名"/></td>
<td>（可包含A-Z,0-9，不能用特殊符号！0_o）</td>
</tr>
<tr>
<td>0_o</td>
<td><input type="password" name="pwd" tabindex="5"/></td>
<td>（至少包含6个字符！o_0）</td>
</tr>
<tr>
<td>0_o</td>
<td><input type="password" name="pwd" tabindex="4"/></td>
<td>（至少包含6个字符！o_0）</td>
</tr>
<tr>
<td>0_o</td>
<td><input type="password" name="pwd" tabindex="3"/></td>
<td>（至少包含6个字符！o_0）</td>
</tr>
<tr>
<td>0_o</td>
<td><input type="password" name="pwd" tabindex="2"/></td>
<td>（至少包含6个字符！o_0）</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女
<input type="radio" name="sex" value="you think"/>你猜
</td>
<td>单选</td>
</tr>
<tr>
<td>嗜好：</td>
<td>
<input type="checkbox" name="like" value="drink"/>喝酒
<input type="checkbox" name="like" value="smoke"/>抽烟
<input type="checkbox" name="like" value="head"/>烫头
</td>
<td>多选</td>
</tr>
<tr>
<td>附件：</td>
<td>
<input type="file" name="file"/>
</td>
</tr>
<tr>
<td>图片按钮</td>
<td>
<input type="image" name="img" src="../../image/qqzone.png"/>
</td>
</tr>
<tr>
<td>普通按钮</td>
<td>
<input type="button" value="普通按钮"/>
</td>
<td>
<button>直接用button普通按钮</button>
</td>
</tr>
<tr>
<td>所在地：</td>
<td colspan="2">
<select name="dizhi" id="dizhiid" multiple size="3">
<!--multiple表示可以选择多个，size表示选择栏同时显示的个数。
有multiple的时候，按住ctrl加鼠标左键，可以选择多个。-->
<option value="1">北京</option><!--value中的内容，是name当中记录的值-->
<option value="2">上海</option>
<option value="3">江苏</option>
<option value="4">山东</option>
<option value="5">甘肃</option>
<option value="6">天津</option>
<option value="7">河北</option>
<option value="8">河南</option>
</select>
</td>
</tr>
<tr>
<td>协议：</td>
<td colspan="2">
<textarea name="xieyi" id="xieyi1" cols="50" rows="5">
一大串文本内容
</textarea>
<!--中文自动换行，英文不自动换行，用css样式可以解决。-->
</td>
</tr>
<tr>
<td>下拉列表：</td>
<td>
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
</td>
</tr>
<tr>
<td><input type="submit"/></td>
<td><input type="reset"/></td>
</tr>
</table>
</fieldset>
</form>
<input type="text" name="nick" form="formid"/>
<!--给form加上一个ID，从表单的外面用form属性，可以跟form关联起来。-->
<!--input属性：
name属性，为了正常的提交数据到服务器，必须添加！
tabindex 调整tab按键的跳转顺序。
value，是提交数据的时候方便组成键值对，或者修改submit和reset中的默认字，
也可以在text当中用value设置文本框的初始值。
required：必须填写。
disabled：文本框处于禁用状态。
readonly：文本框处于只读状态。
pattern:输入验证的正确表达式。
size：设置文本框的宽度。
maxlength：设置文本框最大字符长度。
placeholder：隐藏的提示。 autocomplete：自动完成功能，即自动补全，记录以前输入的帐号，off是关闭，on是开启 autofocus：规定当页面加载时 input 元素应该自动获得焦点。 上面的例子中，自动将光标放在输入用户名的框中。 readonly：限制字符串不能被删除。属性值为false可以删除，为true不可以删除。 formaction：让不同的按钮，跳转到不同的网页，用此属性来确定网页的地址。 formmethod：设置不同的按钮按照哪一种方式，get或者post的方式 type类型属性： text：单行文本。 password：密码文本。 radio：单选。互斥的效果（只能选择一个）用同样的name来实现， checkbox：多选。 submit：提交，有默认的提交二字，要是更改需要用value修改 reset：重置，有默认的重置二字，要是更改需要用value修改 file：提交文件。 image：图片按钮,点击之后，也会跳转到action的指定位置当中。 button：普通按钮，用 <input type="button" value="普通按钮"/>的时候， 跳转不到action中，用<button>普通按钮</button>可以。--><!--select 下拉选择按钮。 textarea 文本区域。--><br/><br/><form action="test.html"> <fieldset> <legend>HTML5新增表单元素</legend> <table> <tr> <td>邮箱：</td> <td> <input type="email" name="email"/> </td> </tr> <tr> <td>网址地址：</td> <td><input type="url" name="url"/></td> </tr> <tr> <td>日期：</td> <td><input type="date" name="date"/></td> </tr> <tr> <td>时间：</td> <td><input type="time" name="time"/></td> </tr> <tr> <td>月份：</td> <td><input type="month" name="month"/></td> </tr> <tr> <td>星期：</td> <td><input type="week" name="week"/></td> </tr> <tr> <td>滚动条：</td> <td><input type="range" name="range"/></td> </tr> <tr> <td>颜色：</td> <td><input type="color" name="color"/></td> </tr> <tr> <td><input type="submit" value="OK" /></td> </tr> </table> </fieldset></form></body></html>
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
