form 表单标签

form标签主要用来把需要提交数据的部分给包起来，其代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单学习</title>
</head>
<body>
	<form class="test-form" method="post" action="xxx.xxx.xxx">
		form 表单常用属性：
		1. method 提交数据的方式
		2. action 把数据提交到某个url
	</form>
</body>
</html>

input 输入文本框

input标签主要用来创建一个文本框，代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单学习</title>
</head>
<body>
	<form class="test-form" method="post" action="xxx.xxx.xxx">
		<iuput class="test-input" type="text" name="test-input" />
		input标签常用属性：
		1. type 规定input标签类型
		2. name 规定这个input的名称 方便后台处理数据
	</form>
</body>
</html>

textarea 输入多行文本框

textarea标签主要用来创建可以输入多行的文本框，代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单学习</title>
</head>
<body>
	<form class="test-form" method="post" action="xxx.xxx.xxx">
		<textarea class="test-textarea" name="test-input">
			textarea标签常用属性：
			1. name 规定这个textarea的名称 方便后台获取数据
		</textarea>
	</form>
</body>
</html>

button 创建按钮

button可以创建一个按钮，多用于点击后提交表单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单学习</title>
</head>
<body>
	<form class="test-form" method="post" action="xxx.xxx.xxx">
		<button class="test-button">测试按钮</button>
	</form>
</body>
</html>

input 标签的其他妙用

代替button标签

其实，input标签可以代替上面的button标签，奇不奇怪？来看，这是按钮的代码：

<input type="button" value="按钮" />
<button>按钮</button>

这两段的代码其效果相同。

设置密码输入框

input标签还可以变成密码输入框：

<input type="password" name="password" />

是不是很厉害！

隐藏input标签

如果你要将一个input标签隐藏，可以这样写：

<input type="hidden" name="hidden-test" />

复选框checkbox

<input type="checkbox" name="test-checkbox" />复选框测试

上方的代码就可以创建一个复选框。

单选框radio

<input type="radio" name="sex" value="男生" />男
<input type="radio" name="sex" value="女生" />女

这两段代码创建了两个单选框。

选择本地文件

<input type="file" name="your-file" />

这行代码生成了一个可以提交文件的input标签，运行代码就可以选择本地的文件。

好了，今天的课程就到这儿了，如果喜欢的可以点个关注和收藏，我是wangzirui32，我们下节课再见！

HTML网页标签代码基本教学（2）使用表单标签

学习目录