以下为代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="java-api.super-yx.com/register" method="post" enctype="multipart/form-data"></form><table border="1"><tr><td align="center" colspan="2" bgcolor="grey" >用户注册</td></tr><br /><tr><td align="right"><label for="username">用户名</label></td><td><input type="text" name="username" id="username" maxlength="20"></td></tr><br /><tr><td align="right"><label for="edit">密码</label></td><td><input type="password" name="password" id="password" maxlength="20"></td></tr><br /><tr><td align="right"><label for="gender">性别</label></td><td><input type="radio" name="gender" value="男" checked/>男<input type="radio" name="gender" value="女"/>女</td></tr><br /><tr><td align="right"><label for="hob">爱好</label></td><td><input type="checkbox" name="hob" value="写作"/>写作 <input type="checkbox" name="hob" value="听音乐"/>听音乐<input type="checkbox" name="hob" value="体育"/>体育</td></tr><br /><tr><td align="right">省份</td><td><select name="province"><option value="shanxi" selected>陕西省</option><option value="shanx">山西省</option></select></td></tr><tr><td align="right">自我介绍</td><td><textarea name="intro" rows="5" cols="25" placeholder="这个家伙什么也没留下"></textarea></td></tr><br /><tr><td colspan="2" align="center" bgcolor="grey"><input type="submit" value="提交"/><input type="reset" value="重置"/></td></tr></table></body>
</html>
- 表单属性
action="java - api.super - yx.com/register"
:指定了表单提交数据的目标 URL。当用户点击提交按钮时,表单数据将被发送到这个 URL。method="post"
:表示表单数据将以 POST 方法提交。POST 方法通常用于提交敏感数据,因为数据不会显示在 URL 中。enctype="multipart/form - data"
:这种编码类型用于表单需要上传文件的情况。不过在当前表单中,并没有文件上传元素(如<input type="file">
),如果不需要上传文件,一般可以使用enctype="application/x - www - form - urlencoded"
。
- 表单元素
- 表格布局(
<table>
标签)- 整个表单使用表格进行布局。
<table border="1">
设置了表格边框为 1 像素。
- 整个表单使用表格进行布局。
- 用户注册标题(
<tr>
和<td>
标签)<tr><td align="center" colspan="2" bgcolor="grey">用户注册</td></tr>
:这一行创建了一个跨两列(colspan="2"
)、背景色为灰色(bgcolor="grey"
)、内容居中(align="center"
)的单元格,用于显示表单标题 “用户注册”。
- 用户名输入(
<input type="text">
)<tr><td align="right"><label for="username">用户名</label></td><td><input type="text" name="username" id="username" maxlength="20"></td></tr>
<label for="username">
与<input type="text" id="username">
相关联,当用户点击标签时,会聚焦到对应的输入框。name="username"
是表单数据中用户名对应的键,id="username"
用于标识元素,maxlength="20"
限制了用户名输入的最大长度为 20 个字符。
- 密码输入(
<input type="password">
)<tr><td align="right"><label for="password">密码</label></td><td><input type="password" name="password" id="password" maxlength="20"></td></tr>
- 与用户名输入类似,这里的
<input type="password">
用于输入密码,输入的内容会以黑点或星号显示,以保护隐私。name="password"
是密码对应的键,maxlength="20"
限制了密码长度。
- 与用户名输入类似,这里的
- 性别选择(
<input type="radio">
)<tr><td align="right"><label for="gender">性别</label></td><td><input type="radio" name="gender" value="男" checked/>男<input type="radio" name="gender" value="女"/>女</td></tr>
- 使用单选按钮来选择性别。两个
<input type="radio">
的name
属性都为gender
,这使得它们属于同一组,用户只能选择其中一个。value
属性分别为 “男” 和 “女”,表示选择后提交的值。checked
属性在 “男” 选项上,表示默认选中 “男”。
- 使用单选按钮来选择性别。两个
- 爱好选择(
<input type="checkbox">
)<tr><td align="right"><label for="hob">爱好</label></td><td><input type="checkbox" name="hob" value="写作"/>写作<input type="checkbox" name="hob" value="听音乐"/>听音乐<input type="checkbox" name="hob" value="体育"/>体育</td></tr>
- 使用复选框来选择爱好。每个
<input type="checkbox">
的name
属性都为hob
,value
属性分别对应不同的爱好。用户可以选择多个爱好。
- 使用复选框来选择爱好。每个
- 省份选择(
<select>
)<tr><td align="right">省份</td><td><select name="province"><option value="shanxi" selected>陕西省</option><option value="shanx">山西省</option></select></td></tr>
- 使用下拉菜单来选择省份。
<select name="province">
定义了下拉菜单,name
属性为province
。<option>
标签定义了菜单中的选项,value
属性是提交的值,selected
属性在 “陕西省” 选项上,表示默认选中陕西省。
- 使用下拉菜单来选择省份。
- 自我介绍(
<textarea>
)<tr><td align="right">自我介绍</td><td><textarea name="intro" rows="5" cols="25" placeholder="这个家伙什么也没留下"></textarea></td></tr>
<textarea>
用于输入多行文本。name="intro"
是提交数据时对应的键,rows="5"
和cols="25"
分别设置了文本区域的行数和列数,placeholder
属性提供了一个提示文本,当文本区域为空时显示。
- 提交和重置按钮(
<input type="submit">
和<input type="reset">
)<tr><td colspan="2" align="center" bgcolor="grey"><input type="submit" value="提交"/><input type="reset" value="重置"/></td></tr>
<input type="submit">
按钮用于提交表单数据,value="提交"
设置了按钮上显示的文本。<input type="reset">
按钮用于重置表单中的所有输入值,value="重置"
设置了按钮上显示的文本。这一行的单元格跨两列(colspan="2"
),背景色为灰色(bgcolor="grey"
),内容居中(align="center"
)。
- 表格布局(
代码运行结果如下