HTML 表单

发布时间：2023-03-20 10:57:21 所属栏目：教程来源：

导读：html 表单用于收集不同类型的用户输入,所有浏览器都支持 <form> 标签。定义和用法 <form> 标签用于为用户输入创建 html 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等。

HTML 表单

html 表单用于收集不同类型的用户输入,所有浏览器都支持 <form> 标签。定义和用法 <form> 标签用于为用户输入创建 html 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等。

HTML 表单
表单是一个包含表单元素的区域

表单元素是允许用户在表单中输入内容，如文本域、下拉列表、单选框、复选框等等

表单使用表单标签 <form> 来设置

<form>. *input 元素* .</form>
HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签 ( <input> )

输入类型是由类型属性（type）定义的，大多数经常被用到的输入类型如下

文本域
<input type="text"> 标签定义了文本域

当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>
<p>First name: <input type="text" name="firstname"></p>
<p>Last name: <input type="text" name="lastname"></p>
</form>
浏览器显示如下

First name:

Last name:

注意: 表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是 20 个字符

密码字段
<input type="password"> 标签定义了密码字段

<form>Password:
<input type="password" name="pwd">
</form>
浏览器显示如下

Password:
注意: 密码字段字符不会明文显示，而是以星号或圆点替代

单选按钮
<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
浏览器显示如下

Male
Female

复选框
<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>
浏览器显示如下

I have a bike
I have a car
提交按钮
<input type="submit"> 定义了提交按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件

表单的动作属性定义了目的文件的文件名

由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

<form name="input" action="/dy/html/getpost" method="get">
<p>用户名：<input type="text" name="user"></p>
<p><input type="submit" value="Submit"></p>
</form>
浏览器显示如下

用户名：

可以在上面的文本框内键入几个字母，然后点击确认按钮

那么输入数据会传送到 "/dy/html/getpost" 的页面，该页面将显示出输入的结果

表单元素属性
form元素只是一个数据获取元素的容器，而容器内的元素称为表单控件。最常用的表单控件是input元素

accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value这11个属性是input元素的传统元素属性

autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width这19个属性是HTML5新增的元素属性

传统属性
name
name属性用于规定input元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过JavaScript引用表单数据

[注意]只有设置了name属性的表单元素才能在提交表单时传递它们的值

type
type属性用来规定input元素的类型

[注意]如果input元素没有设置type属性，或者设置的值在浏览器中不支持，那么输入类型会变成type="text"

accept
accept属性用来规定能够通过文件上传进行提交的文件类型。理论上可以用来限制上传文件类型，然而它只是建设性的，并很可能被忽略，它接受逗号分隔的MIME类型

[注意]该属性只能与type="file"配合使用

<input type="file" accept="image/gif,image/jpeg,image/jpg">
alt
alt属性为图像输入规定替代文本，功能类似于image元素的alt属性，为用户由于某些原因无法查看图像时提供备选信息

[注意]alt属性只能与type="image"的input元素配合使用

<input type="image" src="#" alt="测试图片">
checked
checked属性规定在页面加载时应该被预先选定的input元素，也可以在页面加载后，通过JavaScript进行设置

[注意]checked属性只能与type="radio"或type="checkBox"的input元素配合使用

<input type="radio" name="radio" value="1" checked>
<input type="radio" name="radio" value="2">
<input type="checkBox" name="checkBox" value="1">
<input type="checkBox" name="checkBox" value="2">
<script>var oInput = document.getElementsByTagName('input');
for(var i = 0,len = oInput.length; i < len; i++){
oInput[i].onmouSEOver = function(){
this.checked = 'checked';
}
}
</script>
disabled
disabled属性规定应该禁用input元素。被禁用的字段是不能修改的，也不可以使用tab按键切换到该字段，但可以选中或拷贝其文本

[注意1]disabled属性无法与type="hidden"的input元素一起使用

[注意2]对于IE7-浏览器必须设置为disabled="disabled"，而不可以直接设置disabled，否则使用javascript控制时将失效

<button id="btn1">输入域可用</button>
<button id="btn2">输入域不可用</button>
<input id="test" disabled value="内容">
<script>
btn1.onclick = function(){
test.removeAttribute('disabled');
}
btn2.onclick = function(){
test.setAttribute('disabled','disabled');
}
</script>
readonly
readonly属性规定输入字段为只读。只读字段是不能修改的，但用户仍然可以使用tab按键切换到该字段，还可以选中或拷贝其文本

readonly属性可与type="text"或"password"的input元素配合使用

[注意]IE7-浏览器不支持使用javascript控制readonly属性

<button id="btn1">输入域只读</button>
<button id="btn2">输入域可读写</button>
<input id="test" value="内容" readonly>
<script>
btn1.onclick = function(){
test.setAttribute('readonly','readonly');
}
btn2.onclick = function(){
test.removeAttribute('readonly');
}
</script>
maxlength
maxlength属性规定输入字段的最大长度，以字符个数计

[注意]该属性只能与type="text"或type="password"的input元素配合使用

<input maxlength="6">
<input type="password" maxlength="6">
size
size属性对于type="text"或"password"的input元素是可见的字符数；而对于其他类型，是以像素为单位的输入字段宽度

[注意]由于size属性是一个可视化的设计属性，推荐使用css来代替它

<input size="1">
<input type="password" size="2">
src
src属性作为提交按钮显示的图像的URL

[注意]src属性只能且必须与type="image"的input元素配合使用

<form action="#">
<input name="test">
<input type="image" src="" width="99" height="99" alt="测试图片">
</form>
value
value属性为input元素设定值。对于不同的输入类型，value属性的用法也不同：

type="button"、"reset"、"submit"用于定义按钮上的显示的文本
type="text"、"password"、"hidden"用于定义输入字段的初始值
type="checkBox"、"radio"、"image"用于定义与输入相关联的值
[注意1]type="checkBox"或"radio"必须设置value属性

[注意2]value属性无法与type="file"的input元素一起使用

<button id="btn1">1</button>
<button id="btn2">2</button>
<input id="test">
<script>
btn1.onclick = btn2.onclick =function(){
test.value=this.innerHTML;
}
</script>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!