015-HTML-表单和输入_html通过alter输入表单-CSDN博客

这篇博客详细介绍了HTML中的表单和输入元素的使用，包括文本域、密码字段、单选按钮、复选框以及提交按钮。通过示例展示了如何创建和使用这些元素，以收集用户的不同类型输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!--
	HTML表单和输入
		HTML表单用于收集不同类型的用户输入
	在线实例
		创建文本字段(Text Field)
			本例演示如何在HTML页面创建文本域,用户可以在文本域写入文本
		创建密码字段
			本例演示如何创建HTML的密码域
	HTMl表单
		表单时一个包含表单元素的区域
		表单元素是允许用户在表单中输入内容,比如:文本域(textarea),
		下拉列表,单选框(radio-buttons),复选框(checkboxes)等等
		表单使用表单标签<form>来设置
		<form>
			.
			input 元素
			.
		</form>
	HTML表单-输入元素
		多数情况下被用到的表单标签是输入标签(<input>)
		输入类型是由类型属性(type)定义的.大多数被用到的输入类型如下
	文本域
		文本域通过<input type="text">标签来设定的,
		当用户要在表单中键入字母,数字等内容时,就会用到文本域
		<form action="">
			First Name: <input type="text" name="firstName" /><br>
			Last Name : <input type="text" name="lastName">
		</form>
		注意:表单本身并不可见,同时在大多数浏览器中,文本域的默认宽度是20个字符
	密码字段
		密码字段通过标签<input type="password">来定义
		<form action="">
			Username: <input type="text" name="user" /><br>
			Password: <input type="password" name="password"/>
		</form>
		注意:密码字段字符不会明文显示,而是以星号或者圆点替代
	单选按钮(Radio Buttons)
		<input type="radio">标签定义了表单单选框选项
		<form>
			<input type="radio" name="sex"  value="male" />Male<br>
			<input type="radio" name="sex" value="female"/>Female
		</form>
	复选框(Checkboxes)
		<input type="checkbox">定义了复选框,用户需要从若干给定的选择中选取一个或者若干选项
		<form>
			<input type="checkbox" name="vehicle" value="Bike" />I have a bike<br>
			<input type="checkbox" name="vehicle" value="Car"/>I have a Car			
		</form>
	提交按钮(Submit Button)
		<input type="submit">定义了提交按钮
		当用户单击确认按钮时,表单的内容会被传送到另一个文件.
		表单的动作属性定义了目的文件的文件名.
		由动作属性定义的这个文件通常会接受到输入数据进行相关的处理.
		<input type="text" name="user">
		<input type="submit" value="Submit"/>
	HTML表单标签
		-<form>-定义供用户输入的表单
		-<input>-定义输入域
		-<textarea>-定义文本域
		-<label>-定义了<inpur>元素的标签,一般为输入标题
		-<fieldset>-定义了一组相关的表单元素,并使用外框包含起来
		-<legend>-定义了<fieldset>元素的标题
		-<select>-定义了下拉选项列表
		-<optgroup>-定义选项组
		-<option>-定义下拉列表中的选项
		-<button>-定义一个点击按钮
	-->
	<body>
		<form action="">
			First Name: <input type="text" name="firstName" /><br>
			Last Name : <input type="text" name="lastName">
		</form>
		<p><b>表单本身是不可见的.并且注意一个文本字段的默认宽度是20个字符<b/></p>
		<form action="">
			Username: <input type="text" name="user" /><br>
			Password: <input type="password" name="password"/>
		</form>
		<p><b>注意: <b/>密码字段中的字符是隐藏的(显示为星号或者圆圈)</p>
		<h2>单选框</h2>
		<form>
			<input type="radio" name="sex"  value="male" />Male<br>
			<input type="radio" name="sex" value="female"/>Female
		</form>
		<h2>复选框</h2>
		<form>
			<input type="checkbox" name="vehicle" value="Bike" />I have a bike<br>
			<input type="checkbox" name="vehicle" value="Car"/>I have a Car			
		</form>
		<h2>提交按钮</h2>
		<form name="input" action="dd" method="get">
			<div class="mui-input-row mui-search">
				<input type="text" name="user">
				<input type="submit" value="Submit"/>
			</div>
			
		</form>
	</body>
</html>