当前位置：首页 > news >正文

web前端第一次作业

news 2024/10/21 21:29:41

以下为代码

<!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"）。