> 文章列表 > 表单设计案例—用户注册

表单设计案例—用户注册

表单设计案例—用户注册

练习用form和table标签进行用户的注册,以及一些注意事项

  • 1、代码
  • 2、注意事项

1、代码

<form action="http://aaaa:8080" method="GET"><input type="hidden" name="action"value="login"/><!--  表单--><h1 align="center">用户注册</h1><table align="center"><tr> <td align="right">用户名:</td><td><input type="text" value="默认值" name="name"/></td></tr><tr><td align="right">用户密码:</td><td><input type="password" value="abc"name="passwork"/></td></tr><!-- <tr> <td>确认密码:</td> <td><input type="password" value="abc"/></td></tr> --><tr><td align="right">性别:</td><td><input type="radio"name="sex"value="boy"/><input type="radio"name="sex"checked="checked"value="girl"/></td></tr><tr><td align="right">兴趣爱好:</td><td><input type="checkbox"checked="checked" name="interest"value="java"/>java<input type="checkbox"name="interest"value="JS"/>JavaScript<input type="checkbox"name="interest"value="cpp"/>C++<input type="checkbox"name="interest"value="C#"/>C#<input type="checkbox"name="interest"value="python"/>python</td></tr><tr><td align="right">国籍:</td><td><select name="country"size="" ><option value="none">--请选择国籍--</option><option selected="selected"value="China">中国</option><option value="America">美国</option><option value="Japan">日本</option></select></td></tr><tr><td align="right">自我评价:</td><td><textarea rows="10" cols="20" name="desc">默认值</textarea></td></tr> <tr><td align="right"><input type="reset" value="重置"/></td><td>&nbsp;&nbsp;&nbsp;<input type="submit"/></td></tr></table>
</form>

2、注意事项

select标签有name、size、multiple这3个属性
1、name:设置下拉列表的名称
2、size:用于改变下拉列表框的大小,默认值为1
3、multiple:表示允许用户从列表中选择多项,若缺省,则表示单选

<option>标签有两个属性:value和selected,他们都是可选项
1、value:用于设置当该选项被选中并提交后,浏览器传送给服务器的数据
2、selected:用来指定选项的初始状态,表示该选项在初始时被选中

多行文本框<textarea>标签

<textarea name=""rows=""cols=""wrap="off | virtual | physical>初始值</textarea>
rows:设置输入域的行数
cols:设置输入域的列数
wrap:设置是否自动换行

form标签是表单标签

action属性设置提交的服务器地址
method属性设置提交的方式GET(默认值)和POST

表单提交的时候,数据没有发送给服务器的三种情况

1、表单中没有name属性
2、单选、复选(下拉列表中的option标签)都需要添加value属性,一边发送给服务器
3、表单项不在提交的form标签中

GET请求的特点是:

1、浏览器地址栏中的地址是:action属性[+?+请求参数]请求参数的格式是:name=value&name=value……
2、不安全(会暴露密码值)
3、有数据长度的限制

POST请求的特点是:

1、浏览器地址栏中只有action属性值
2、相对于GET请求要安全
3、理论上没有数据长度的限制

参考视频