HTML中的表单元素

214 阅读4分钟

表单用于显示、收集用户信息,并提交给服务器。
完整的表单由两部分组成:

  • 前端:由表单元素和更够与用户实现交互的表单控件构成
  • 服务器端:表单提交后的处理

(1)表单元素:

用于定义表单的提交信息,如提交地址,提交方式等
语法:

 <form name="表单名" method="提交方法" action="处理程序">
    ………
 </form>

注意:
只有出现在form中的表单控件的数据才会被提交
form在页面中没有显示效果,只有功能

属性:

action属性:
作用:指定提交给服务器处理程序的地址,若省略不写,默认提交给本页。
method属性:
指定提交数据的方法,取值为:

  • get:获取,特点是以明文的方式提交数据到服务器(数据会显示在地址栏上),安全性较低。
  • post:(邮递,打包)邮寄,特点:以隐式的方式提交数据到服务器(不会显示),安全性较高。
    enctype属性:
    指定表单数据的编码方式,即什么样的收据允许被提交,取值为:
  • application/x-www-form-urlencoded默认值,可以将所有的数据提交给服务器(文件除外)
  • multipart/form-data:可以将文件提交给服务器
  • text/plain:只允许将普通字符提交给服务器,特殊字符无法提交(=,&,?)。

(2)表单控件:

标签具体描述
form定义供用户输入的表单
input定义输入域
textarea定义文本域 (一个多行的输入控件)
label定义一个控制的标签
select定义一个选择列表
option定义下拉列表中的选项
button定义一个按钮

①<input>标记:用于定义一个用户输入区

基本语法:<input>或<input />
通用属性:

  • type:根据不同的type值,创建不同的输入控件
  • name:定义控件的名称,提供给服务器端使用,建议采用控件缩写+功能形式命名
  • value:定义控件的值,提供给服务器端使用
  • disabled:禁用控件(无法操作,无法提交),该属性无值
名称格式说明
文本域<input type="text" name="文本字段名称"maxlength=" " size=" " value=" ">size与maxlength属性用来定义此区域显示的尺寸大小与输入的最大字符数
密码域<input type="password" name="密码字段名称"size=" " maxlength=" " value=" " >当用户输入密码时,区域内将会显示“*”号代替用户输入的内容
单选按钮<input type="radio" name=" " value=" " checked />checked属性用来设置该单选按钮默认状态是否被选中。当有多个互斥的单选按钮时,设置相同的name值
复选框<input type="checkbox" name=" " value=" " checked />checked属性用来设置该复选框默认状态是否被选中,当有多个复选框时,可设置相同的name值,也可以设置不同的name值
提交按钮<input type="submit" name=" " value=" "/>将表单内容提交给服务器的按钮
取消按钮<input type="reset" name=" " value=" "/>将表单内容全部清除,重新填写的按钮
图像按钮image<input type="image" src="图片"/>使用图像代替submit按钮,图像的源文件名由src属性指定
文件域<input type="file" name=" " size=" " maxlength=" ">上传文件
隐藏域<input type="hidden" name=" " value=" " />用户不能在其中输入信息,用来预设某些要传递的信息

②<textarea>标记:用于创建一个可以输入多行文本的文本域

基本语法:<textarea></textarea>
常用属性:

  • name:用来标记文本区域,缩写txt
  • cols:设置文本域的字符宽度值,以字符数为单位
  • rows:设置文本域允许输入的最大行数
  • readonly:只读,用户无法修改文本域的内容

③<select>标记:用于创建一个可以提供多个选项选择的下拉列表

基本语法:

<select name="" size="" multiple>
      <option value="" selected>…</option>
      <option value="">…</option>
      ……
</select> 

select的属性:

  • name:缩写sel
  • size:默认显示选项的数量,如果大于1的话,则为滚动列表
  • multiple:设置多选,无值属性,也会变成滚动列表,配合Ctrl或Shift键实现多选

④<fieldset>标记:用于为控件分组

基本语法:

<fieldset>----------分组
	<legend>----------分组标题
		标题名称
	</legend>  
	组内控件  
</fieldset>

例如:设计如图所示的学生信息注册网页。 2.png
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>学生信息注册页面</title>
	</head>
	<body>
		<h3 align="center">学生信息注册</h3>
		<form name="stu" action="">
			<table>
				<tr>
					<td>姓名:</td>
					<td><input type="text" name="stuName"></td>
				</tr>
				<tr>
					<td>性别:</td>
					<td><input type="radio" name="stuSex" checked="checked"><input type="radio" name="stuSex"></td>
				</tr>
				<tr>
					<td>出生日期</td>
					<td><input type="text" name="stuBirthday"></td>
					<td>按格式yyyy-mm-dd</td>
				</tr>
				<tr>
					<td>学校:</td>
					<td><input type="text" name="stuSchool"></td>
				</tr>
				<tr>
					<td>专业:</td>
					<td>
						<select name="stuSelect2">
							<option selected>计算机科学与技术</option>
							<option>网络工程</option>
							<option>物联网工程</option>
							<option>应用数学</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>体育特长:</td>
					<td colspan="2">
						<input type="checkbox" name="stuCheck">篮球
						<input type="checkbox" name="stuCheck">排球
						<input type="checkbox" name="stuCheck">足球
						<input type="checkbox" name="stuCheck">游泳
					</td>
				</tr>
				<tr>
					<td>上传照片:</td>
					<td colspan="2"><input type="file"></td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="stuPwd"></td>
				</tr>
				<tr>
					<td>个人介绍:</td>
					<td colspan="4"><textarea name="Letter" rows="4" cols="40"></textarea> </td>
				</tr>
				<tr>
					<td><input type="submit" value="提交"><input type="reset" value="取消"></td>
				</tr>
			</table>
		</form>
	</body>
</html>