web前端第一次作业

以下为代码

<!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>
  1. 表单属性
    • 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"
  2. 表单元素
    • 表格布局(<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属性都为hobvalue属性分别对应不同的爱好。用户可以选择多个爱好。
    • 省份选择(<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")。

代码运行结果如下

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

灰二走

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值