【HTML】-- 用户注册表单

【HTML】-- 用户注册表单

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

具体效果如下所示:

效果1

【HTML】-- 用户注册表单_第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

【HTML】-- 用户注册表单_第2张图片

代码2
<html>
<head><title>注册表单</title></head>
<body>
<h3>用户注册</h3>
<form>
学习经历:&nbsp
<input type="radio" name="xiaoxue"/>小学 
<input type="radio" name="chuzhong"/>初中 
<input type="radio" name="gaozhong"/>高中 
<input type="radio" name="daxue"/>大学 
<input type="radio" name="shuoshi"/>硕士 
</p>
<p>
爱好:&nbsp
<input type="checkbox" name="interest" value="C"/>唱歌 
<input type="checkbox" name="interest" value="T"/>跳舞 
<input type="checkbox" name="interest" value="K"/>看电影 
<input type="checkbox" name="interest" value="L"/>旅游 
<input type="checkbox" name="interest" value="Y"/>运动 
</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

【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"/>小学 
<input type="radio" name="chuzhong"/>初中 
<input type="radio" name="gaozhong"/>高中 
<input type="radio" name="daxue"/>大学 
<input type="radio" name="shuoshi"/>硕士 
</p>
<p>
爱好:&nbsp
<input type="checkbox" name="interest" value="C"/>唱歌 
<input type="checkbox" name="interest" value="T"/>跳舞 
<input type="checkbox" name="interest" value="K"/>看电影 
<input type="checkbox" name="interest" value="L"/>旅游 
<input type="checkbox" name="interest" value="Y"/>运动 
</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>

你可能感兴趣的:(前端学习,html,前端)