创建表单---HTML5

最新推荐文章于 2024-05-09 19:04:14 发布

造福每一个拼ta不会写的学子

最新推荐文章于 2024-05-09 19:04:14 发布

阅读量367

点赞数 7

文章标签： html5

本文链接：https://blog.csdn.net/qq_73839890/article/details/136489596

版权

一. 简答题（共1题，100分）

1. (简答题)

使用<form>、<input>、<select>、<option>、<area>等标签组合可以生成一个表单，用来与用户交互。如果再结合<table>、<tr>、<td>标签就可以制作出格式非常规范的表单。请完成一个表单的制作任务。

注意：表单提交方式使用post，联系方式长度取值范围7至11位。

选做：上网查JavaScript编程语法，当输入的用户名长度等于零，显示提示信息“用户名不能为空”；当输入的用户名长度超过15个字符时，显示提示信息“用户名长度超过15个字符，不合法！”。当输入密码长度大于8个字符时，显示提示信息“密码长度不能大于8个字符，请重新设置”。

参考样式：

<!doctype html>
<html xmlns="">
<head>
    <meta charset="utf-8">
    <title>HTML表格</title>
</head>


<html lang="">
<body>

<h2>用户注册</h2>

<form action="/submit_form" method="post">
    <table style="width:100%">
        <tr>
            <td>用户名：</td>
            <td><label>
                <input type="text" name="username" required>
            </label></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><label>
                <input type="password" name="password" required>
            </label></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <label>
                    <select name="gender">
                        <option value="Male">男</option>
                        <option value="Female">女</option>
                    </select>
                </label>
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <label>
                    <input type="checkbox" name="hobbies" value="Playing Games">
                    打游戏
                </label>
                <label>
                    <input type="checkbox" name="hobbies" value="Eating">
                    干饭
                </label>
                <input type="checkbox" name="hobbies" value="Sleeping">睡觉
            </td>
        </tr>
        <tr>
            <td>个人简介：</td>
            <td><label>
                <textarea name="introduction" rows="4" cols="50"></textarea>
            </label></td>
        </tr>
        <tr>
            <td>头像：</td>
            <td><input type="file" name="avatar"></td>
        </tr>
        <tr>
            <td>联系方式：</td>
            <td><label>
                <input type="text" name="contact" pattern="[7-11]{1}" required>
            </label></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="提交">
                <input type="reset" value="重置">
            </td>
        </tr>
    </table>
</form>

</body>
</html>

造福每一个拼ta不会写的学子

关注

7
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
创建表单---HTML5

选做：上网查JavaScript编程语法，当输入的用户名长度等于零，显示提示信息“用户名不能为空”；当输入的用户名长度超过15个字符时，显示提示信息“用户名长度超过15个字符，不合法！当输入密码长度大于8个字符时，显示提示信息“密码长度不能大于8个字符，请重新设置”。使用<form>、<input>、<select>、<option>、<area>等标签组合可以生成一个表单，用来与用户交互。如果再结合<table>、<tr>、<td>标签就可以制作出格式非常规范的表单。请完成一个表单的制作任务。
复制链接

扫一扫