HTML 表单

最新推荐文章于 2025-12-18 23:38:54 发布

原创最新推荐文章于 2025-12-18 23:38:54 发布 · 428 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

前端开发专栏收录该内容

13 篇文章

订阅专栏

表单，指的是文本框、按钮、单选框、复选框、下拉列表等的统称。在HTML中，表单标签有五种：form、input、textarea、select和option。表单的作用：在浏览器端收集用户信息，然后将数据提交给服务器处理。

!<!DOCTYPE HTML>
	<html>
		<head>
			<meta charset="UTF-8"/>
			<title></title>
		</head>
		<body>
			<!--input、textarea、select、option都是表单标签，我们必须要放在form标签内部--->
			
			<!--action  表单提交地址  
			 name 标签的名字 
			 target 打开方式  用来指定窗口的打开方式，一般都是用_blank
			 method 提交方式  methon用于指定表单数据使用哪一种http提交方法。method 取值有两个，一个是get，另外一个是post
			 enctype 用于指定表单数据提交的编码方式。
			 -->
			<form action="index.php" name="myForm" method="post">
				<!-- input标签是自闭合标签，是没有结束符号的
				type 的取值：
					text:单行文本框
					password:密码文本框
					radio:单选框
					checkbox :复选框
					button或者submit或者reset
					file: 文件上传
				value: 设置文本框的默认值
				maxlength:  设置文本框中最多可以输入的字符数
				size: 设置文本框的长度
				-->
				姓名：<input type="text" size="10" maxlength="5" value="这是一个单行文本框" /><br />
				密码：<input type="password" / value="123456" maxlength="6" size="6"><br />
				性别：
				<!-- 单选框  checked属性表示默认选择这个单选框  在开发的时候，对于同一组的单选框必须设置相同的name-->
				<input type="radio" name="gender" value="男"/ checked>男
				<input type="radio" name="gender" value="女" id="">女
				<!-- 复选框 checkbox -->
				你喜欢的水果：<br />
				<input type="checkbox" name="fruit" value="苹果"/>苹果
				<input type="checkbox" name="fruit" id="" value="香蕉">香蕉
				<input type="checkbox" name="fruit" id="" value="西瓜">西瓜
				
				<!-- 按钮 -->
				
				<input type="button" value="好" /> <!--value就是按钮上的取值 -->
				<!-- 
				 普通按钮一般情况下都是配合JavaScript来进行各种操作的。
				 提交按钮一般都是用来给服务器提交数据的；
				 重置按钮一般用来清除用户在表单中输入的内容。
				 -->
				 <input type="button" value="普通按钮" />
				 <input type="submit" value="提交按钮"/>
				 <input type="reset" value="重置按钮" />
				 
				
				<!-- 文件上传 -->
				<input type="file" />
				<!-- 多行文本框
				 cols:行数
				 rows:列数
				 
				 -->
				<textarea cols="30" rows="10">这是一个多行文本框</textarea>
				
				<!-- 下拉列表
				 下拉列表由select和option这两个标签配合使用来表示的
				 select属性
					multiple:设置下拉列表可以选择多项
					size:设置下拉列表显示几个列表项
				 -->
				<select multiple size="2" >
					<!-- option 
					属性
						value:用于配合JavaScript和服务器进行操作的
						selected :是否被选中
					 -->
					<option value="">HTML</option>
					<option value="">CSS</option>
					<option value="">JavaScript</option>
					<option value="">JQuery</option>
					<option value="">Vue.js</option>
				</select>
				
			</form>
			
		</body>
	</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function ()
        {
            var oBtn = document.getElementsByTagName("input");
            oBtn[0].onclick = function ()
            {
                alert("I ❤ HTML ！");
            };
        }
    </script>
</head>
<body>
    <form method="post">
        <input type="button" value="表白"/>
    </form>
</body>
</html>