HTML 表单标签

最新推荐文章于 2024-05-14 22:39:54 发布

ONESTAR博客

最新推荐文章于 2024-05-14 22:39:54 发布

阅读量2.1k

点赞数 5

分类专栏： JavaWeb 文章标签： HTML HTML 表单标签

本文链接：https://blog.csdn.net/One_L_Star/article/details/99428819

版权

JavaWeb 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

1、<form> 标签

2、<input > 标签

3、<select> 标签与 <option> 标签

4、<textarea> 标签

5、实现注册账号功能：

1、<form> 标签

<form> 标签代表一个表单，表单用于向服务器传输数据，<form> 标签能够包含 <input>,可以是文本字段，复选框，单选框或提交按钮等，还可以包含 <textarea><select>等。<form> 常用属性：

name：用于定义表单名称
action：用于规定提交表单时向何处发送表单数据
method：用于规定提交的方案，一般取值 POST 或 GET

POST与GET方式的区别：

get 方式只能少量数据，而 post 可以携带大数据（文件上传）
get 方式提交时，数据会在地址栏上显示，安全性差；post 方式不会在地址栏上显示，安全性高

2、<input > 标签

<input > 标签用于搜集用户信息，根据不同的 type 属性值，输入字段拥有很多种形式，可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。<input> 标签 type 属性值：

【1】text

<input type="text">：定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符，常用属性有：

name：定义标签名称
value：定义标签值
size：定义输入字段的长度
maxlength：定义输入最大字符个数

【2】password

<input type="password">：定义密码字段，该字段中的字符被掩码，常用属性有：

name：定义标签名
value：定义标签值
size：定义输入字段的长度
maxlength：定义可输入最大字符个数

【3】radio

<input type="radio">：定义单选按钮，常用属性有：

name：定义标签名。注：对于单选按钮，如果要想做到单一选择，多个 radion 的 name 值必须一样
value：定义标签值
checked：定义标签默认被选中

【4】checkbox

<input type="checkbox">：定义复选框，重用属性有：

name：定义标签名称。注：一组的checkbox它们的name值应该是一样的
value：定义标签值
checked：定义该标签默认被选中

【5】button

<input type="button">：定义可点击按钮（多数情况下用于通过 JavaScript 启动脚本），常用属性有：

name：定义标签名称
value：按钮显示名称

【6】hidden

<input type="hidden">：定义隐藏的输入字段，常用属性有：

name：定义标签名称
value：定义标签值

【7】file

<input type="file">：定义输入字段和“浏览”按钮，供文件上传，常用属性有：

name：定义标签名称

【8】submit

<input type="submit">：定义提交按钮，提交按钮会把表单数据发送到服务器，常用属性有：

name：定义标签名
value：定义按钮显示名称

【9】reset

<input type="reset">：定义重置按钮，重置按钮会清楚表单中的所有数据，常用属性有：

name：定义标签名称
value：定义按钮显示名称

【10】image

<input type="image">：定义图像形式的提交按钮，这个标签主要是用了替换 submit 按钮，因为默认产生的提交按钮不美观，这个标签允许采用指定的图片作为提交按钮，常用属性有：

name：定义标签名称
src：定义作为提交按钮显示的图像的URL
alt：定义作用图像的替代文本

3、<select> 标签与 <option> 标签

【1】<select>

用于定义一个下拉列表，常用属性有：

name：定义下拉列表的名称
size：定义下拉列表中可见选项的数目
multiple：定义可选择多个选项

【2】<option>

用于定义下拉列表的选项，<option> 需要位于 <select> 标签内部，常用属性有：

value：定义送往服务器的选项值
selected：定义选项为选中状态

4、<textarea> 标签

<textarea> 标签用于定义一个多行文本输入控件（多行文本框，文本域），常用属性有：

name：定义多行文本框名称
cols：定义多行文本框可见宽度
rows：定义多行文本框可见行数
wrap：规定多行文本框中文字如何换行

<html>
	<head>
		<title>我的主页</title>
	</head>
	<body>
		<form action="hello.html">	<!--提交到hello.html-->
			用户：<input type="text" name="user"/><br/>
			密码：<input type="password" name="paw"/><br/>
			性别：<input type="radio" name="sex" value="nv" checked="checked"/>女<input type="radio" name="sex" value="nan"/>男<br/>	<!--单选框-->
			爱好：<input type="checkbox" name="love" value="yumao"/>羽毛球<input type="checkbox" name="love" value="PP"/>乒乓球<br/>		<!--复选框-->
			文件：<input type="file"/><br/>
			生日：<select>		<!--下拉框-->
					<option>1995</option>
					<option>1996</option>
					<option>1997</option>
					<option>1998</option>
			</select><br/>
			自我描述：<textarea cols="20" rows="10"></textarea><br/>
			隐藏项：<input type="hidden"><br/>
			<input type="submit"/><br/>		<!--提交按钮-->
			<!--<input type="image" src="main2.jpg">-->
			<input type="reset"/>		<!--重置按钮-->
			<input type="button"/>
		</form>
	</body>
</html>

5、实现注册账号功能：

<html>
	<head>
		<title>龙星网注账号注册</title>
	</head>
	<body>
		<h1>龙星网注账号注册</h1>
		<table border="0" width="100%">
			<tr>
				<td align="right">注册邮箱：</td>
				<td><input type="text" name="mail"/></td>
			</tr>
			
			<tr>
				<td>&nbsp</td>
				<td>你还可以使用<a href="#">账号</a>注册或者<a href="#">手机号</a>注册</td>
			</tr>
			
			<tr>
				<td align="right">真实姓名:</td>
				<td><input type="text" name="name"/></td>
			</tr>
			
			<tr>
				<td align="right">性别:</td>
				<td><input type="radio" name="sex" value="nv" checked="checked"/>女<input type="radio" name="sex" value="nan"/>男</td>
			</tr>
			
			<tr>
				<td align="right">生日:</td>
				<td>
					<select>		<!--下拉框-->
					<option>1995</option>
					<option>1996</option>
					<option>1997</option>
					<option>1998</option>
					</select>年
					
					<select>		<!--下拉框-->
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					</select>月
					
					<select>		<!--下拉框-->
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					</select>日
				</td>
			</tr>
			
			<tr>
				<td align="right">学历:</td>
				<td>
					<select>		<!--下拉框-->
					<option>专科</option>
					<option>本科</option>
					<option>硕士</option>
					<option>博士</option>
					</select>
				</td>
			</tr>
			
			<tr>
				<td>&nbsp</td>
				<td>
					<img src="1.png" width="200" height="50"/><a href="#">看不清换一张？</a>
				</td>
			</tr>
			
			<tr>
				<td align="right">验证码:</td>
				<td><input type="text" name="try"/></td>
			</tr>
			
			<tr>
				<td>&nbsp</td>
				<td><input type="image" src="1.png" width="200" height="50"/></td>
			</tr>
		</table>
	</body>
</html>

效果如下：

ONESTAR博客

关注

5
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML 表单标签

目录1、<form> 标签2、<input > 标签3、<select> 标签与 <option> 标签4、<textarea> 标签5、实现注册账号功能：1、<form> 标签<form> 标签代表一个表单，表单用于向服务器传输数据，<form> 标签能够包含 <in...
复制链接

扫一扫