HTML常用知识点整理四（表单标签及其控件）

最新推荐文章于 2024-05-21 18:11:13 发布

weixin_41452476

最新推荐文章于 2024-05-21 18:11:13 发布

阅读量344

点赞数

分类专栏： HTML笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_41452476/article/details/108812203

版权

HTML笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!--  表单控件：

       包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

  提示信息：

        一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

  表单域：  

      他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input 控件(重点)

在上面的语法中，input /标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，input /标签还可以定义很多其他的属性，其常用属性如下表所示。 -->

<!-- label标签(理解)

label 标签为 input 元素定义标注（标签）。

作用：  用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢？

for 属性规定 label 与哪个表单元素绑定。

    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要输入大量的信息，就需要用到textarea/textarea标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

    <textarea cols="每行中的字符数" rows="显示的行数">
      文本内容
    </textarea>
 -->

表单标签及其控件

表单标签及其控件案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
     <form action="" method="">
	<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
		<caption><h4 style="color: pink;font-size: 25px;">青春不常在 抓紧时间敲代码</h4></caption>
		<tr height="60">
			<td>所在地区:</td>
			<td><input type="text" value="北京" style="color:#ccc;" /></td>
		</tr>
		<tr height="60">
			<td>用户名:</td>
			<td><input type="text" value="andy" /></td>
		</tr>
		<tr height="60">
			<td>
				<label for="suibian">密码:</label>
			</td>
			<td><input type="password" value="123124" maxlength="6" id="suibian" /></td>
		</tr>
		<!-- 以下是年龄 -->
		<tr height="60">
			<td>年龄</td>
			<td>
				<select name="" id="">
					<option value="">选择年份</option>
					<option value="">1996</option>
					<option value="">1997</option>
					<option value="">1998</option>
					<option value="">1999</option>
					<option value="">2000</option>
				</select>
				<select name="" id="">
					<option value="">选择月份</option>
					<option value="">1月</option>
					<option value="">2月</option>
					<option value="">3月</option>
					<option value="">4月</option>
					<option value="">5月</option>
				</select>
			</td>
		</tr>
		<!-- 	以下是籍贯 -->
		<tr height="60">
			<td>籍贯:</td>
			<td>
				<select name="" id="">
					<option value="">籍贯</option>
					<option value="">西安</option>
					<option value="">宝鸡</option>
					<option value="">咸阳</option>
					<option value="">渭南</option>
					<option value="">安康</option>
				</select>
			</td>
		</tr>
		<tr height="60">
			<td>性别</td>
			<td style='color: blue;'>
				男:<input type="radio" name="sex" />
				女:<input type="radio" name="sex" checked="checked" />
				人妖:<input type="radio" name="sex" />
			</td>
		</tr>
		<tr height="60">
			<td>喜欢的类型</td>
			<td>
				<input type="checkbox" name="love" />妩媚
				成熟<input type="checkbox" name="love" />
				气质<input type="checkbox" name="love" />
				可爱<input type="checkbox" name="love" />
				小鲜肉<input type="checkbox" name="love" />
				御女<input type="checkbox" name="love" checked="checked" />
			</td>
		</tr>
		<tr>
			<td></td>
			<td>
				<input type="button" value="注册" />
				<input type="submit" value="提交" />
				<input type="reset" value="重置" />
				<input type="image" src="down.jpg" />
 			</td>
		</tr>
		<tr>
			<td>上传头像</td>
			<td>
				<input type="file" />
			</td>
		</tr>
		<tr>
			<td>给我留言</td>
			<td>
				<textarea name="" id="" cols="30" rows="10" style="color: #ccc;">不支持富文本

				</textarea>
			</td>
		</tr>
	</table>
	</form>
</body>
</html>

常用属性：

Action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method用于设置表单数据的提交方式，其取值为get或post。
name用于指定表单的名称，以区分同一个页面中的多个表单。

注意：每个表单都应该有自己表单域。

weixin_41452476

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML常用知识点整理四（表单标签及其控件）

<!-- 表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。input 控件(重点)在上面的语法中，in...
复制链接

扫一扫