html用控件写火影注册页面

最新推荐文章于 2024-08-16 22:57:43 发布

学不了一点面向对象

最新推荐文章于 2024-08-16 22:57:43 发布

阅读量406

点赞数 8

本文链接：https://blog.csdn.net/2301_80021782/article/details/135720883

版权

本文详细介绍了在WebStorm2021.2.2环境中，如何使用HTML构建一个包含各种控件的注册页面，包括文本框、单选/复选框、日期选择、密码输入、下拉菜单等，以及表单的提交方式。作者的目标是创建一个高自由度的火影游戏注册功能，尽管目前只是简化版。

摘要由CSDN通过智能技术生成

一个初学者的笔记~~~控件做注册页面（小声：超级详细！

环境：WebStorm 2021.2.2

语言：HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控件</title>
</head>
<body>
<!--
和用户交互：
    1.超链接
    2.控件(标签)
-->
<!--
<form> HTML 元素表示包含用于提交信息的交互式控件的文档部分
    action属性: 设置地址
    method属性：（提交方式）
            get（默认值）数据跟随地址栏提交的地址，使用明文方式（能看见密码）传输
            post（）地址栏隐藏传输文字
<input>标签 (控件输入标签)
  type属性:
    text ：文本框
        placeholder: 隐含提示文字
        maxlength:最大长度
        size= ”xx px“: text方框的长度
    radio 单选框  重复+name="sex"：单选
    checkbox 复选框
        checked="checked":默认被选中
    date:日期
    password：密码
input的元素关联：(文字与要填的框产生关联)
<input ... id="a"> <label for="a">文字</label>(label标签夹上文字即可)
<select> HTML 元素表示一个控件，该控件提供选项菜单。
    <option>是下属各个选项
<textarea> HTML 元素表示多行纯文本编辑控件
    placeholder: 隐含提示文字
    cols:宽度
    rows：长度<button>：（控件）按钮
  type属性：设置按钮的类别
           submit:提交
           reset:重置（当前表单范围内所有的控件回归为默认的最初状态）
-->
<!--
marquee标签：横向滚动（滚屏）
-->
<h1 align="center">欢迎注册火影角色</h1>
<marquee bgcolor="pink" behavior="" direction="">你将来到火影世界，用自己的视角体验火影人生</marquee>
<hr color="red" size="5px">
<!--<form action="../day3/target.html" method="">-->
<form action="https://hyrz.qq.com/main.shtml" method="">
    <table border="0">
        <tr>
            <td>昵称：</td>
            <!--黄框：不完善，能用，此input进行元素关联<label>即可-->
            <!--如果希望表单提交的时候控件中的值能被伴随发送（提交）需要给对应的控件name属性（实际应用是必须的）-->
            <td><input type="text" placeholder="请输入你在火影世界的名字(最长为10字符)" size="35px" maxlength="10" name="name"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <!--
                单选框：默认情况下如果被选中了都会发送on(代表选中了其中一个)
                需要给单选框设置value属性，当对应的单选框被选中并提交的时候，value属性值就会被加以发送。
                -->
                <input type="radio" name="sex" checked="checked" id="sex_male" value="sex_male"><label
                    for="sex_male">男</label>
                <input type="radio" name="sex" id="sex_female" value="sex_female"><label for="sex_female">女</label>
                <input type="radio" name="sex" value="unknown" id="sex_unknown"><label for="sex_unknown">未知</label>
            </td>
        </tr>
        <tr>
            <td>偏好：</td>
            <td>
                <!--
                复选框数据传输方式与单选框同
                1.发送数据对应控件设置name属性
                2.通过value属性设置值，提交时就可把对应的值发送
                -->
                <input type="checkbox" name="good at" value="忍术">忍术
                <input type="checkbox" name="good at" value="体术">体术
                <input type="checkbox" name="good at" value="幻术">幻术
                <input type="checkbox" name="good at" value="精神力">精神力
                <input type="checkbox" name="good at" value="智力">智力
            </td>
        </tr>
        <tr>
            <td>出生日期：</td>
            <td><input type="date" name="born"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" placeholder="请输入密码" name="password"></td>
        </tr>
        <tr>
            <td>请再次输入密码：</td>
            <td><input type="password" placeholder="请再次输入密码" name="reenter password"></td>
        </tr>
        <tr>
            <td>出生地：</td>
            <td>
                <!--发送菜单内容
                1.给select标签设置name属性
                2.给每个选项单独设置value值
                -->
                <select name="忍村">
                    <option value="">--请选择--</option>
                    <option value="火影村">火影村</option>
                    <option value="岩隐村">岩隐村</option>
                    <option value="砂隐村">砂隐村</option>
                    <option value="雾隐村">雾隐村</option>
                    <option value="云隐村">云隐村</option>
                    <option value="流浪忍者">流浪忍者</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>选择家族：</td>
            <td>
                <select name="family">
                    <option value="">--请选择--</option>
                    <option value="宇智波">宇智波</option>
                    <option value="漩涡">漩涡</option>
                    <option value="千手">千手</option>
                    <option value="鬼灯">鬼灯</option>
                    <option value="猿飞">猿飞</option>
                    <option value="志村">志村</option>
                </select>
            </td>
            <td><input type="text" placeholder="自定义家族" name="family"></td>
        </tr>
        <tr>
            <td>请输入你的忍道：</td>
            <td>
                <textarea cols="30" rows="10" placeholder="请输入你的忍道" name="忍道"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button type="submit">注册</button>
                <button type="reset">重置</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

跳转到浏览器后：

点击注册按钮后发送注册内容到...

想法：

嘿嘿初衷是做一个火影游戏，不是那种橙光游戏，是小说«网游之近战法师»那种高自由度还有剧情，各个服务器能连接（就像游戏参与者是小说中穿越火影中的那种程度，每个人所面对的剧情都是不一样的），最想要是全真！！希望有生之年能体验到全真技术！！！

奈何技术有限，只能做到简约版的注册页面，所以此处插的是火影官方游戏的链接（~ . ~)

学不了一点面向对象

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
html用控件写火影注册页面

嘿嘿初衷是做一个火影游戏，不是那种橙光游戏，是小说«网游之近战法师»那种高自由度还有剧情，各个服务器能连接（就像游戏参与者是小说中穿越火影中的那种程度，每个人所面对的剧情都是不一样的），最想要是全真！希望有生之年能体验到全真技术！奈何技术有限，所以此处插的是火影官方游戏的链接（~ . ~)一个初学者的笔记~~~控件做注册页面（小声：超级详细！环境：WebStorm 2021.2.2。点击注册按钮后发送注册内容到...
复制链接

扫一扫