Web前端开发笔记——第二章 HTML语言第八节表单标签

Posted 2021-09-09 晚风(●•σ )

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端开发笔记——第二章 HTML语言第八节表单标签相关的知识，希望对你有一定的参考价值。

一、表单的定义

表单用于收集用户的输入信息，它是一个区域，在这个区域里添加表单元素即可收集用户的信息，表单元素可以是文本、单选框、复选框、按钮、下拉菜单等等。
比如下面的qq登录页面，它就是一个表单：

表单用<from></from>标签表示，它有个重要的属性为action属性，action后跟数据处理网页的URL，表示收集用户的数据交由该页面进行处理，它表示为<from action="">表单元素</from>，其它的属性这里不做展开。

二、输入标签

在from标签内加上<input>标签，它用于用户输入信息，且input标签是单独出现的。

（一）文本框和密码框

input标签通过添加type属性后的取值来表示文本框和密码框，另外还有name属性，它标识该表单的唯一元素，即该表单元素的名称。
一个文本框或密码框的默认宽度是20个输入字符，也可以通过设置size属性来限制输入的字符。
文本框表示为：

<input type="text" name="" size="" />

例如，在HBuilder X中，下列html代码，该表单由两个输入标签的文本框组成：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<h2>登录页面</h2>
			<p>账号：<input type="text" name="User_id" /></p>
			<p>密码：<input type="text" name="User_password" /></p>
		</form>
	</body>
</html>

运行结果如下，输入内容：
密码框与文本框的区别是当在输入内容时，其文本内容是由星号或者小圆点替代显示输入内容的，密码框表示为：

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

例如，在HBuilder X中，下列html代码，该表单由输入标签的一个文本框和一个密码框组成的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<h2>登录页面</h2>
			<p>账号：<input type="text" name="User_id" /></p>
			<p>密码：<input type="password" name="User_password" /></p>
		</form>
	</body>
</html>

运行结果如下，可见我们输入的密码是由暗文显示的：

（二）提交按钮和重置按钮

按钮分为提交按钮和重置按钮。input标签通过添加type属性、value属性和name属性来表示，即type="submit"时表示提交按钮，而type="reset"时表示重置按钮，vlaue=""表示按钮上面的文字，name=""表示该按钮的名称。
例如，在HBuilder X中，下列html代码，该表单由输入标签的一个文本框和一个密码框组成的，输入后由提交按钮点击登录，或者点击重置按钮重新输入内容：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<h2>登录页面</h2>
			<p>账号：<input type="text" value="" name="User_id" /></p>
			<p>密码：<input type="password" value="" name="User_id" /></p>
			<input type="submit" name="log_submit" value="登录" />
			<input type="reset" name="Rese_submit" value="重置" />
		</form>
	</body>
</html>

运行结果如下：
点击重置后，输入内容会被全部清除：

（三）单选框和复选框

单选框只能选择一项，而复选框可以选择多项，例如下图就是个复选框，不过也进行了限制，只能最多选择三项：
input标签通过添加type属性、vlaue属性、name属性以及checked属性来设置单选框和复选框。type="radio" 表示单选框，而type="checkbox"表示多选框，vlaue=""表示提交给后端的数据，name=""表示单个项的名称， checked="checked"表示该项被默认选中。
例如，在HBuilder X中，下列html代码的选课页面，物理或历史是必须选择的，所以它默认选中，另外在剩下四项中选择两项：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<h2>选课页面</h2>
			<p>一、请在以下两项中选择一项，物理或历史必选：<br />
				物理<input type="radio" name="necessary" value="选择物理" checked="checked" />
				历史<input type="radio" name="necessary" value="选择历史" />
				<br />
				二、其它科目为自选，请在以下四项中选择两项：<br />
				化学<input type="checkbox" name="ch" value="选择化学" />
				生物<input type="checkbox" name="bi" value="选择生物" />
				政治<input type="checkbox" name="po" value="选择政治" />
				地理<input type="checkbox" name="ph" value="选择地理" />
			</p>
			<input type="submit" name="log_submit" value="提交" />
		</form>
	</body>
</html>

运行结果如下，我们可以发现我们定义的两个单选框，其两个input标签的name属性是一样的，这样才能保证只能选择一个选项，且若不做选择，会默认选择“物理”科目：
而若想控制复选框中选择的限制数量，就要用到javascript，这里不做进一步，只是了解。

（四）带边框的表单

通过<fieldset></fieldset>标签，设置一个带边框的表单，其中在fieldset标签内输入<legend></legend>标签，可添加该表单的名称。另外在legend标签内定义输入标签input的属性。
如下，在HBuilder X中，下列html代码，创建一个带边框的表单，其名称为信息栏：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>

	<body>
		<form>
			<fieldset>
				<legend>信息栏:</legend>
				姓名：<input type="text" size="10"><br />
				性别：<input type="text" size="10"><br />
				身份证号：<input type="text" size="20"><br />
				<input type="submit" name="log_submit" value="提交" />
				<input type="reset" name="reset_submit" value="重置" />
			</fieldset>
		</form>
	</body>

</html>

运行结果如下：

三、下拉菜单

使用<select></select>标签，通过下拉菜单选择内容，使用name属性，select name=""表示定义下拉菜单的名称。
其中每一项都用<option>选项</option>标签表示，设置value属性，表示送往目标服务器的值。

<option value="11">set</option>

当设置option标签的属性selected="selected"，即<option selected="selected">选项</option>时表示默认选择的选项，它会在下拉菜单上的文本框中显示。
例如，在HBuilder X中，下列html代码的选课页面中，设置下拉菜单，选择物理或者历史，默认选项为物理：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <form>
        <h2>选课页面</h2>
        <p>请在以下两项中选择一项，物理或历史为必选：
            <select name="Course selection">
                <option value="physics" selected="selected">
                    物理
                </option>
                <option value="politics">
                    历史
                </option>
            </select>
        </p>
        <input type="submit" name="log_submit" value="提交" />
    </form>
</body>

</html>

运行结果如下：

四、文本域

通过<textarea></textarea>文本域标签，可以定义一大块的文本区域，它有以下的属性，rows属性定义该文本域的行数，cols属性定义该文本域的列数，name属性表示该文本域的名称，id属性代表定义该文本域的唯一 id 值。

<textarea name="" id="" cols="" rows=""></textarea>

例如，在HBuilder X中，下列html代码中，设置一个行数为30，列数为10的文本域：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <form>
        <h2>反馈</h2>
        <p>在下面输入您要反馈的内容：</p>
        <textarea name="page" id="page" cols="30" rows="10"></textarea>
        <input type="submit" name="loge_submit" value="提交" />
        <input type="reset" name="reset_submit" value="清除" />
    </form>
</body>

</html>

运行结果如下：

另外可以通过添加属性maxlength=""来限制该文本区域允许输入的最大字符数，还可以通过添加readonly>属性，在readonly>其后输入内容，使用户无法更改已经写入的文本。

<textarea name="" id="" cols="" rows="" maxlength="" readonly></textarea>

结语

以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！

以上是关于Web前端开发笔记——第二章 HTML语言第八节表单标签的主要内容，如果未能解决你的问题，请参考以下文章

Web前端开发笔记——第二章 HTML语言第一节标签元素属性

学习笔记第八节课

Web前端开发笔记——第二章 HTML语言第十一节语义标签

Web前端开发笔记——第二章 HTML语言第七节表格标签

Web前端开发笔记——第二章 HTML语言第五节图像标签

Web前端开发笔记——第二章 HTML语言第二节基本标签

Web前端开发笔记——第二章 HTML语言 第八节 表单标签

目录