web前端的基础制作示例_web前端tr-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_77699763/article/details/143160343

我们将用web前端制作以下显示图片：

将其主要分成两部分：表格及内容制作

接下来是实现的代码;

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>用户注册表格形式</title>
</head>

<body>
    <h1>用户注册</h1>
    <table border="1">
        <tr>
            <th>项目</th>
            <th>内容</th>
        </tr>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>
				<label for="gender">性别</label>
				</td>
            <td>
                <input type="radio" name="性别" value="男">男
                <input type="radio" name="性别" value="女">女
            </td>
        </tr>
        <tr>
            <td>
				<label for="hob">爱好</label>
				</td>
            <td>
                <input type="checkbox" name="爱好" value="写作">写作
                <input type="checkbox" name="爱好" value="听音乐">听音乐
				<input type="checkbox" name="爱好" value="体育">体育
            </td>
        </tr>
        <tr>
            <td>省份</td>
            <td>
				<select name="省份" multiple>
					<option >广西</option>
					<option >山西</option>
					<option >陕西</option>
				</select>
				</td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td>
				<textarea name="introduction"></textarea>
				</td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="reset" value="重置">
                <input type="submit" value="提交">
            </td>
        </tr>
    </table>
</body>

</html>

这里省份本文只写了三个，有需要再添加即可

也可以自己输入省份，将省份代码修改为：

            <td>省份</td>
            <td>
				<input type="text" name="province">
				</td>

以下是代码运行结果：