学习web第i+1天：复习表格表单的实现

最新推荐文章于 2024-10-16 11:23:07 发布

听雨·眠

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量77

点赞数

文章标签：前端学习

本文链接：https://blog.csdn.net/h53536/article/details/127534681

版权

选择一个省份，后面不能自动出现相对应的城市，听说需要通过js来实现，现在还没学会，等学会了再改一改，先水到这。。。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <table border="1" cellpadding="5px" cellspacing="3px" align="center">
            <tr>
                <th colspan="4">产品定购</th>
            </tr>
            <tr>
                <td>姓&nbsp;名</td>
                <td><input type="text" name="username" /></td>
                <td>联系电话</td>
                <td><input type="tel" name="phone" </td>
            </tr>
            <tr>
                <td>产品名称</td>
                <td colspan="3"><input type="text" name="product" /></td>
            </tr>
            <tr>
                <td>付款方式</td>
                <td colspan="3"><input type="radio" name="pay" />微信<input type="radio" name="pay" />支付宝<input type="radio" name="pay" />货到付款
                </td>
            </tr>
            <tr>
                <td>关注产品</td>
                <td colspan="3"><input type="checkbox" name="conccern">家具<input type="checkbox" name="conccern">家电<input type="checkbox" name="conccern">服装<input type="checkbox" name="conccern">化妆品
                </td>
            </tr>
            <tr>
                <td>地址</td>
                <td colspan="3">
                    <select name="add1">
                        <option>广东</option>
                        <option>江苏</option>
                         </select>
                    <select>
                        <option value="广东">广州</option>
                        <option value="广东">深圳</option>
                        <option value="江苏">苏州</option>
                        <option value="江苏">无锡</option>
                    </select>
                    <input type="text" name="tt"/>
                </td>
            </tr>
            <tr aria-rowspan="4">
                <td align="center">备注</td>
                <td colspan="3"><textarea name="remark" rows="4" cols="20"></textarea></td>
            </tr>
            <tr>
                <td colspan="4" align="center"><input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;<input type="reset" value="重置"/></td>
            </tr>
        </table>
    </form>
</body>
</html>

上述代码运行结果如下：