编程技术文章分享与教程

网站首页 > 技术文章 正文

html5 常用注册表单代码（html注册表单登录代码）

hmc789 2024-11-17 11:21:59 技术文章 2 ℃

<!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>

<!-- method="POST" 数据在请求体中提交-->

<!-- method="GET" 数据在url地址中提交 -->

<form action="" style="display: grid; gap: 0.5em" method="POST">

<!-- fieldset表单分组标签 -->

<fieldset>

<!-- legend表单分组标题项 -->

<legend>必填项：</legend>

<!-- 文本输入框 -->

<div>

<!-- 点击账号实现输入焦点落到username输入框中 for属性与id属性相同即可 -->

<label for="username">账号：</label>

<!-- autofocus 刷新页面后，焦点第一时间落在的位置 -->

<!-- required 必填项 placeholder="提示语" -->

<input

type="text"

id="username"

name="username"

autofocus

required

placeholder="请填写你的账号名"

/>

</div>

<!-- 密码输入框 -->

<div>

<!-- 输入框内容自动打星，符号可以自已定义 -->

<label for="password">密码：</label>

<input type="password" id="password" name="password" />

</div>

<!-- 单选按钮：多选一 -->

<div>

<!-- 这里点击性别自动到默认方法：将for的值 与对应的默认选项中id属性相等即可 -->

<label for="baomi">性别：</label>

<input type="radio" id="nan" name="gender" value="nan" />

<label for="nan">男</label>

<input type="radio" id="nv" name="gender" value="nv" />

<label for="nv">女</label>

<input type="radio" id="baomi" name="gender" value="baomi" checked />

<label for="baomi">保密</label>

</div>

<!-- 手机输入框 -->

<div>

<label for="tel">手机号：</label>

<input type="number" id="tel" name="tel" required />

</div>

<!-- 日期入框 -->

<div>

<label for="datetime-local">出生年月：</label>

<input type="date" id="datetime" name="datetime" />

</div>

<!-- 邮箱输入框 -->

<div>

<!-- 自带邮箱验证功能 -->

<label for="email">邮箱：</label>

<input

type="email"

id="email"

name="email"

required

placeholder="如：xxx@qq.com"

/>

</div>

</fieldset>

<!-- fieldset表单分组标签 -->

<fieldset>

<!-- legend表单分组标题项 -->

<legend>兴趣爱好：</legend>

<!-- 复选按钮：多选 -->

<div>

<!-- 这里点击性别自动到默认方法：无法实现 -->

<label>爱好：</label>

<!-- 因为允许同时提交多个值，所以name属性要写成数组格式 -->

<input

type="checkbox"

id="programmer"

name="hobby[]"

value="programmer"

checked

/><label for="programmer">编程</label>

<input type="checkbox" id="game" name="hobby[]" value="game" /><label

for="game"

>游戏</label

>

<input

type="checkbox"

id="trave"

name="hobby[]"

value="trave"

/><label for="trave">旅游</label>

<input type="checkbox" id="shot" name="hobby[]" value="shot" /><label

for="shot"

>摄影</label

>

</div>

<!-- 颜色输入框 -->

<div>

<label for="color">幸运色：</label>

<input type="color" id="color" name="color" />

</div>

<!-- 拉杆范围拖动条 -->

<div>

<label for="range">拉杆：</label>

<input type="range" id="range" name="range" />

</div>

</fieldset>

<!-- 图片提交 -->

<div>

<label for="image">上传头像：</label>

<input name="imgfile" type="file" accept="image/gif, image/jpeg" />

<input name="upload" type="submit" value="上传" />

</div>

<!-- URL提交 -->

<div>

<label for="urlweb">个人网站：</label>

<input type="urlweb" id="urlweb" name="urlweb" />

</div>

<!-- 下拉列表 -->

<div>

<label>会员级别：</label>

<select name="level" id="">

<option value="1">铜牌会员</option>

<option value="2">银牌会员</option>

<option value="3">金牌会员</option>

<option value="4">钻石会员</option>

</select>

</div>

<!-- datalist -->

<!-- 相当于输入框 + 下拉列表 -->

<div>

<label for="">关键字：</label>

<!-- type=search,选择后，在选择项后有一个X图标 -->

<input type="search" name="search" id="" list="my-key" />

<datalist id="my-key">

<option value="html"></option>

<option value="CSS"></option>

<option value="PHP"></option>

<option value="JAVA"></option>

</datalist>

</div>

<!-- 按钮 -->

<div>

<button type="submit">提交</button>

</div>

</form>

</body>

</html>

Tags：

猜你喜欢

标签列表
最新留言