前端HTML注册表

title: 注册表

关于html表单的介绍

首先新建一个文件的拓展名为.html
接着在里面写上如下内容

<!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>申请表</title>
</head>

<body>
    用户名:<input type="text" name="yuan" value="请输入用户名" maxlength="9"><br>
    密&nbsp&nbsp&nbsp码:<input type="password" name="password"><br>
    性别: 男<input type="radio" name="sex" checked><input type="radio" name="sex"><br>
    生日:<input type="datetime-local" name="birth"> <br>
    兴趣爱好:<input type="checkbox" name="interest">吃饭
    <input type="checkbox" name="interest">睡觉
    <input type="checkbox" name="interest">打豆豆
    <br>
    所在地:<select name="grade">
        <option value="gz">广州</option>
        <option value="sz">深圳</option>
        <option value="bh" selected="selected">北海</option>
        <option value="sh">上海</option>
        <option value="bj">北京</option>
    </select><br>
    <!-- rows表示列的个数  cols表示一行的字数 textarea文本域-->
    自我简介:<br><textarea rows="5" cols="100" name="introduce"></textarea><br>

    <input type="submit" value="注册"><br>
</body>

</html>

input 表示一个输入框,里面加上type可以对输入内容进行限制 ,比如令type=“password”,输入的
类容则会被隐藏,实现密码输入的样式。此外要特别注意别忘记了加 " "

划重点之单选多选

radio 表示单选 checkbox 表示多选 而对单选或者多选的选项一定要加上一个name值
他们的值是任意的,但单选的选项和多选的选项一定要有一个相同的name

下拉表单的写法


<select name="grade">
        <option value="gz">广州</option>
        <option value="sz">深圳</option>
        <option value="bh" selected="selected">北海</option>
        <option value="sh">上海</option>
        <option value="bj">北京</option>
    </select><br>

与前面不同的是 select标签弹出的可选选项样式
标签内部可以嵌套option标签 这个是里面的选项

最后的提交按钮

<input type="submit" value="注册">

这里让type值为submit 里面显示的文字写在value中

或者也可以直接用button标签

<button >注册</button>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值