html表单基础

来源：互联网发布：googlenet in caffe 编辑：程序博客网时间：2024/05/16 16:06

表单：用户搜集用户的信息，比如登录表单的用户名、密码等。

这些信息会提交给服务器来验证。

input标记：

<input type="text" name="username" size="20" disabled="true" value="tom"/>
type="text"：文本输入框；
type="submit"：提交按钮
type="button"：普通按钮
type="reset"：重置按钮
type="password"：密码输入框
type="radio"：单选（checked="checked"默认选则）
type="checkbox"：多选（checked="checked"默认选则）
type="file"：上传文件（必须给form添加enctype="multipart/form-data"）
type="hidden"：隐藏域（默认提交一些内容）

size="20"：最多显示20个字符
name="username"：相当于变量名
disabled="true"：不可编辑
value="tom"：默认值是tom。

非input标记：

<textarea>：多行文本框
<select>:下拉框

form的method方式：

get:默认模式，提交的信息可以在URL中看到。
例如：file:///G:/Java/java_ee/first.html?username=123456&passwd=111111中
有两个变量名，username和passwd是代码中设置name属性的内容。
?username=后面的123456就是提交的用户名。
&passwd=后面的111111就是提交的密码。
post:这种模式提交的信息在URL中看不到。

代码：

<html><head><title>HTML表单基础</title><meta http-equiv="content-type" content="text/html; charset=utf-8"/></head><body><form method="get"><table border="1"><tr><td align="right">用户名:</td><td><!--下面这一句中不添加name的话，系统不会提交这个内容--><input type="text" name="username" size="20" disabled="true" value="tom"/></td></tr>   <tr><td align="right">密码:</td><td><!--下面这一句中不添加name的话，系统不会提交这个内容--><input type="password" name="passwd" size="20"/></td></tr><tr><td align="right">性别:</td><td><!--单选框radio-->男<input type="radio" name="sex" value="m" checked="checked"/>女<input type="radio" name="sex" value="f" /></td></tr><tr><td align="right">爱好:</td><td><!--复选框checkbox-->足球<input type="checkbox" name="interest" value="footing" />做饭<input type="checkbox" name="interest" value="cooking" checked="checked"/>钓鱼<input type="checkbox" name="interest" value="fishing" /></td></tr><tr><td align="right">照片:</td><td><input type="file" name="imgfile" /></td></tr><tr><td>自我描述:</td><td><!--多行文本编辑框--><textarea name="desc" rows=3" cols="20"></textarea></td></tr><tr><td>城市:</td><td><!--下拉框selectmultiple="multiple"可按住Ctrl多选selected="true"设置默认选项--><select name="city" multiple="multiple"><option value="BJ">北京</option><option value="SH">上海</option><option value="XA" selected="true">西安</option></select></td></tr><!--隐藏域--><input type="hidden" name="key" value="somedata" /><tr><td colspan="2" align="center"><!--提交按钮--><input type="submit" value="注册"/><!--重置按钮--><input type="reset" value="重置"/><!--普通按钮--><input type="button" value="点我没用"/></td></tr></table></form></body></html>

界面如下：

阅读全文

1 0