【日常练习】实现一个注册页面

实现如图所示的注册页面(注意: 仅要求实现样子相同或相似, 功能不实现)
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
</head>
<body>
<table cellpadding="2">
    <tr>
        <td>
            注册邮箱:
        </td>
        <td><input></td>
    </tr>

    <tr>
        <td></td>
        <td>你还可以手机注册</td>
    </tr>

    <tr>
        <td>
            创建密码:
        </td>
        <td><input></td>
    </tr>

    <tr>
        <td>
            真实姓名:
        </td>
        <td><input></td>
    </tr>

    <tr>
        <td align="right">
            性别:
        </td>
        <td>
            <input type="radio" name="sex" value="male" /><input type="radio" name="sex" value="female" /></td>
    </tr>

    <tr>
        <td align="right">
            生日:
        </td>
        <td>
            <select size="1">
                <option>2001</option>
                <option>2002</option>
                <option>2003</option>
                <option>2004</option>
                <option>2005</option>
                <option>2006</option>
            </select><select size="1">
                <option>01</option>
                <option>02</option>
                <option>03</option>
                <option>04</option>
                <option>05</option>
                <option>06</option>
            </select><select size="1">
                <option>01</option>
                <option>02</option>
                <option>03</option>
                <option>04</option>
                <option>05</option>
                <option>06</option>
            </select></td>
    </tr>

    <tr>
        <td align="right">
            我正在:
        </td>
        <td>
        <select size="1">
            <option>睡觉</option>
            <option>吃饭</option>
            <option>打架</option>
        </select>
        </td>
    </tr>

    <tr>
        <td></td>
        <td>
            <img src="verycode.gif">看不清,换一张
        </td>
    </tr>

    <tr>
        <td>
            验证码:
        </td>
        <td><input></td>
    </tr>

    <tr>
        <td></td>
        <td>
            <img src="btn_reg.gif">
        </td>
    </tr>


</table>
</body>
</html>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现一个记事本的功能,可以使用uniapp提供的指令进行综合练习,以下是一个可能的实现思路: 1. 首先,在pages文件夹下创建一个新的页面,例如Notebook.vue。 2. 在Notebook.vue中,使用uniapp提供的组件来构建记事本的界面。可以使用input组件作为标题输入框,textarea组件作为内容输入框,button组件作为保存按钮。 3. 在data中定义一个notes数组,用来保存用户输入的多条笔记。每一条笔记可以定义为一个对象,包括标题和内容两个属性。 4. 在methods中定义一个saveNote方法,当用户点击保存按钮时触发。在该方法中,可以通过uniapp的api将用户输入的标题和内容保存到notes数组中的一个新对象中,然后将该对象添加到notes数组中。 5. 可以在页面中使用v-for指令来遍历notes数组,渲染出用户保存的所有笔记。 6. 可以使用v-model指令来绑定输入框的值,实现双向数据绑定。当用户输入标题和内容时,即可实时更新data中的属性值。 7. 可以为保存按钮添加一个点击事件,当用户点击保存时,调用saveNote方法将输入的内容保存到notes数组中。 8. 可以使用localStorage等方式将notes数组保存在本地,以实现数据的持久化储存。在组件的created生命周期函数中,可以读取本地存储的notes数组,并将其赋值给data中的notes数组。 9. 最后,可以美化记事本的界面,添加一些样式和动画效果,使其更加符合用户的需求。 通过上述步骤,就可以使用uniapp的指令综合练习实现一个简单的记事本应用。当用户输入标题和内容后,点击保存按钮即可保存笔记,并在页面中展示出来。用户还可以随时编辑和删除已保存的笔记。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值