【HTML】-- 用户注册表单

article/2025/9/23 21:59:28

【HTML】-- 用户注册表单

使用html标签做一个简单的注册表单，下面是一些常用的标签。
button标签：普通按钮，功能代码自定义。
submit：“确定” ，提交到后台。
reset：“取消” ，让表单控件原内容为空。
select标签：下拉选择框。
textarea：多行文本输入框。

具体效果如下所示：

效果1

在这里插入图片描述

代码1

<html>
<head><title>注册表单</title></head>
<body>
<h3>用户注册</h3>
<form>
<p>
用户:
<input type="text"/>
</p>
<p>
密码:
<input type="password"/>
</p>
<p>
&emsp;&emsp;&emsp;
<input type="submit" value="确定"/>
&emsp;&emsp;&emsp;
<input type="reset" value="取消"/>
</p>
</from>
</body>
</html>

效果2

在这里插入图片描述

代码2

<html>
<head><title>注册表单</title></head>
<body>
<h3>用户注册</h3>
<form>
学习经历：&nbsp
<input type="radio" name="xiaoxue"/>小学&nbsp
<input type="radio" name="chuzhong"/>初中&nbsp
<input type="radio" name="gaozhong"/>高中&nbsp
<input type="radio" name="daxue"/>大学&nbsp
<input type="radio" name="shuoshi"/>硕士&nbsp
</p>
<p>
爱好：&nbsp
<input type="checkbox" name="interest" value="C"/>唱歌&nbsp
<input type="checkbox" name="interest" value="T"/>跳舞&nbsp
<input type="checkbox" name="interest" value="K"/>看电影&nbsp
<input type="checkbox" name="interest" value="L"/>旅游&nbsp
<input type="checkbox" name="interest" value="Y"/>运动&nbsp
</p>
<p>
籍贯：&nbsp
<select name="from"/><option>甘肃</option><option>新疆</option><option>青海</option><option>宁夏</option><option>西藏</option>
</select>
</p>
<p>
技能：
<select multiple="multiple" name="jinen"><option>html</option><option>css</option><option>javascript</option>
</select>
</p>
<p>
</from>
</body>
</html>

也可以放到一起组成新的注册表单，效果如下所示：

效果3

在这里插入图片描述

代码3

<html>
<head><title>注册表单</title></head>
<body>
<h3>用户注册</h3>
<form>
<p>
用户:
<input type="text"/>
</p>
<p>
密码:
<input type="password"/>
</p>
<p>
性别：&nbsp&nbsp
<input type="radio" name="sex" value="M"/>男
&nbsp&nbsp
<input type="radio" name="sex" value="F"/>女
</p>
<p>
学习经历：&nbsp
<input type="radio" name="xiaoxue"/>小学&nbsp
<input type="radio" name="chuzhong"/>初中&nbsp
<input type="radio" name="gaozhong"/>高中&nbsp
<input type="radio" name="daxue"/>大学&nbsp
<input type="radio" name="shuoshi"/>硕士&nbsp
</p>
<p>
爱好：&nbsp
<input type="checkbox" name="interest" value="C"/>唱歌&nbsp
<input type="checkbox" name="interest" value="T"/>跳舞&nbsp
<input type="checkbox" name="interest" value="K"/>看电影&nbsp
<input type="checkbox" name="interest" value="L"/>旅游&nbsp
<input type="checkbox" name="interest" value="Y"/>运动&nbsp
</p>
<p>
籍贯：&nbsp
<select name="from"/><option>甘肃</option><option>新疆</option><option>青海</option><option>宁夏</option><option>西藏</option>
</select>
</p>
<p>
技能：
<select multiple="multiple" name="jinen"><option>html</option><option>css</option><option>javascript</option>
</select>
</p>
<p>
普通按钮：
<input button value="普通按钮" id="b1" name="PT" >
</p>
<p>
提交按钮：
<input type="submit" value="提交"/>
</p>
<p>
重置按钮：
<input type="reset" value="重置"/>
</p>
</from>
</body>
</html>