HTML表单有哪些？HTML表单内容的细致介绍（附代码）
一、介绍
1.表单概念：
表单最重要的展现是在客户端接收会员的信息，然后将数据递交给后台的程序来操控这些数据，从技术的概念上说，表单就是用来操纵form对象，对象是一种根本的数据类型
2.创立表单:
表单通过<form>标签来创立，其中放置表单的对象，如表单域、按钮和其他事物，<form>标签中可扩展几个属性:
a.action属性
通过<form>标签定义的表单里面必需有action属性才可以将表单中的数据递交上去
<form action="some.php">
</form>以上代码表示这个表单的作用是用来提交some.php这个页面的数据
b.method属性
该属性的作用是告诉阅读器数据是以何种方式提交上去的，该属性下有两个选中:"get"和"post"，默许状况下，数据被提交的方 式是get,表单域中输入的内容会增加在action指定的URL中，当表单提交后会员便获得一个明白的URL,由于这种方式下数据会添 加到URL中，所以好处是可以留存在珍藏夹中和别人分享，直接拜访主页的URL可以到达和填写注册后一样的结果，如有些时 候，会员将本人已经注册过的一些网站主页参加到本人的珍藏夹，再次从珍藏夹中翻开时，会发明已经是登录的状态。而post 这种方式，数据将以HTTP头的情势发送，表单数据不再是URL中的一部分。二者不同是get在平安性上较差，所有表单域的值 直接显现，而post除了可见的处置足本程序之外，别的东西都可以潜藏，所以在实际使用时平常选中post这种处置方式
c.name属性
作用是令提交上去的表单数据可以被处置这些数据的程序识别，大部分页面中放入的表单很大概不止一个，此时就需要给不一样 的表单起不一样的名字，以便程序识别
<form name="me">
</form>
...
<script language="JavaScript">
var length=document.me.length.value;
</script>上述部分代码说明通过表单me猎取输入的length数值，代码中有不一样的表单可以通过name来识别
d.enctype属性
该属性代表HTML表单数据的编码方式，离别有application/x-www-form-urlencoded（标准编码方式，提交的数据被编码为名称/ 值对）、multipart/form-data（表示数据编码为一条信息，为表单定义了MIME编码方式，创立了一个与传统不一样的POST缓冲 区，页面上每个控件对应新闻的一个部分）和text/plain（表示数据以纯文本的情势停止编码，这样在信息中将不包括控件或格 式字符）共三种方式
e.target属性
目标显示方式，表示在何处翻开目标URL，可以设定4种方式，_blank表示在新的页面中翻开链接，_self表示在雷同的窗口翻开 页面，_parent表示在父级窗口翻开页面，_top表示将页面载入到包括该链接的窗口，代替任何当前在窗口中的页面.
<form action="mailo:depp59@gmail.com"
method="post"
name="me"
enctype="text/plain"
target="_blank">
...
</form>这段代码表白该表单的动作是发送到邮箱depp59@gmail.com，使用post的传输方式，使用text/plain编码方式的me表单，使之 在新页面中翻开
3.表单域：即会员输入数据的地方
表单域可以分为input、textarea、select 3个对象，其中大部分表单通过input属性来实现，textarea和select创立一种操纵类型
二、input对象下的多种表单展现情势
页面中大部分表单的情势都是通过输入标志input来实现的
<input name=""
type=""
value=""
size=""
maxlength="">a.其中name表示输入数据的名字，其作用是为了让程序清楚所提交的数据
<input type="text" name="length"> 这个输入的数据命名为length var length=document.me.length.value;
假如缺少了这样一个name属性，虽然在阅读器中的显示没有什么转变，但是后台程序后JavaScript程序就不克不及获得提交的数据
b.type属性表示所定义的是哪品种型的表单情势，该属性有九个可选值:
text 单行的文本框
password 将文本更换为"*"的文本框
checkbox 只能做二选一的是或否选中
radio 从多个选项中肯定的一个文本框
submit 肯定命令文本框
hidden 设定不成被阅读会员修改的数据
image 用图片表示确实定符号
file 设定文件上传
button 用来配合客户端足本
c.size:表示文本框字段的长度
d.maxlength:表示可输入的最长的字符数目
e.value:表示预先设定好的信息
4.text文本框的样式表单
<html>
<head>
<title>text样式表单</title>
<style type="text/css">
input{
font:50% 微软雅黑;
}
</style>
</head>
<body>
<form action="some.php" name="myform">
输入会员名:<input type="text" name="name" size=20 maxlength=12> <br>
输入邮箱地址:<input type="text" name="address" size=20 maxlength=20>
</form>
</body>
</html>代码中size定义了文本框的长度，而maxlength定义了这个文本框最多只能输入12个字符，假如超出了这个长度数据将不克不及输入，这两个text样式的数据定义了不一样的名字这很关键，不然一旦需要被程序调取数据将没法识别。
5.password输入密码的样式表单（可以将文本使用保密情势展现出来的一个功效，按照不一样的阅读器会使用点状形状或星号符表示）
<html>
<head>
<title>password样式表单</title>
<style type="text/css">
input{
font:50% 微软雅黑;
}
</style>
</head>
<body>
<form action="some.php" name="myform">
输入会员名:<input type="text" name="name" size=40 maxlength=12> <br>
输入邮箱地址:<input type="text" name="address" size=20 maxlength=20><br>
输入密码:<input type="password" name="password" size=20 maxlenght=12>
</form>
</body>
</html>6.checkbox复选框的表单样式（阅读器会在选中栏前面供给一个小方框假如选中小框中会增加小勾符号表示选中）
<html>
<head>
<title>checkbox样式表单</title>
<style type="text/css">
input{
font:50% 微软雅黑;
}
</style>
</head>
<body>
<form action="some.php" name="myform">
<h3>注册信息:</h3>
<input type="checkbox" name="truename" checked="checked">使用真实姓名
<h3>实名制可以利便您更好地和伴侣交流</h3>
<input type="checkbox" name="address" checked="checked">显示我的地址
<h3>假如去除勾选，其他会员将没法查到你的地址</h3>
<input type="checkbox" name="mail" checked="checked">可以给我发邮件
<h3>假如勾选，我们将会为您发送来自广告商的信息</h3>
</form>
</body>
</html>上面代码中增加了checked="checked"表示复选框默许值设定为checked,那么√符号会被默许增加
7.radio单选按钮的样式表单（多选一表单）
radio样式相似于选中题，在一组选项中选出独一的一项，发送这列数据，其中给这组选项定义雷同的名字，但是通过value属性 来加以不同，因此，这里必需给input对象设定value值，并且不一样对象的value值不克不及雷同，不然数据没法识别
<html>
<head>
<title>radio样式表单</title>
<style type="text/css">
input{
font:50% 微软雅黑;
}
</style>
</head>
<body>
<form action="some.php" name="myform">
<h3>性别</h3>
<input type="radio" name="gender" value="one">我是男的<br>
<h3>请准确选中您的性别哦</h3>
<input type="radio" name="gender" value="two">我是女滴<br>
<h3>请准确选中您的性别哦</h3>
</form>
</body>
</html>8.submit提交数据的样式表单
该属性创立一个按钮，该按钮的作用就是提交数据。当点击"提交"按钮时，数据会发送到指定的地方。其中通过value值可以修 改按钮上显示的内容。此外还有一个reset属性，这是一个复位按钮，当被点击时表单的内容会被从新设定，回到页面初始位置
<html>
<head>
<title>submit样式表单</title>
<style type="text/css">
input{
font:100% 微软雅黑;
}
</style>
</head>
<body>
<form action="some.php" name="myform">
<h3>性别</h3>
<input type="radio" name="gender" value="one">我是男的<br>
<h3>请准确选中您的性别哦</h3>
<input type="radio" name="gender" value="two">我是女滴<br>
<h3>请准确选中您的性别哦</h3>
<input type="submit" name="submit" value="肯定">
<input type="reset" name="submit" value="复位">
</form>
</body>
</html>9.hidden潜藏域的样式表单
hidden属性可以创立一个潜藏域，数据会被潜藏起来，会员没法对其停止操纵（这些数据平常是会员不关怀的但是必需被提交 的数据）
10.image样式的表单（可以看做图像更换按钮的技术，当图像被点击时，数据一并被提交至效劳器）
<input type="image" src="" alt="肯定">
使用src属性指定这张图像的途径，使用alt属性来增加文本注释，此时提交按钮被更换成一个小小的图像，当点击图像时，其作 用就相当于submit按钮，但是当表单数据被提交的同时，会员所单击的图像的位置坐标（image.x=23 image.y=59）也会被发送
表单中还有一种触发事件的button表单，它只是一个按钮，单个button按钮并不会提交任何数据，它的作用是用来调取前端页 面，即客户端的足本程序
<input type="button" value="运转" onclick="calculate();">
11.file上传文件的样式表单
该表单同意会员上传本人的文件，例如会员上传本人的图像给效劳器，用来改动会员在不一样网站上的形象图片。需要留意的 是，当使用file样式的表单时，必需在<form>标签中说明编码方式，这样效劳器才可以接收到准确信息
<body>
<h3>上传我的文件</h3>
<form action="some.php" enctype="multipart/form-data" name="myform">
<input type="file" name="uploadfile">
</form>
</body>三、textarea对象的表单
该对象就像是input对象中的text表单，只不外是扩展过的text样式表单，可以通过行(rows)属性和列(cols)属性来编纂文本域的大 小，常见于留言板、论坛中回帖时的文本框等
<html>
<head>
<title>textarea对象的表单</title>
<style type="text/css">
textarea{
font:100% 微软雅黑;
color:navy;
}
</style>
</head>
<body>
<form action="some.php" method="post" enctype="multipart/form-data" name="myform">
<textarea name="some" rows=10 cols=50 value="say">请文明用语:
</textarea>
</form>
</body>
</html> textarea属性标签必需要封闭，且生成页面时在文本框中会预先设定好文本“请文明用语”，但是会员不得不先删去预先的文本再 编纂本人的内容。当文本框中输入的内容超出预先设定的行数时会主动显现滚动条，假如没有超出文本框的范畴则滚动条是灰 色的
四、select对象表单
使用select将创立一个列表样式的表单，显示为显现一个下拉列表框，令会员可以利便的选中其中一个名目，平常在一些要求填 写地区、生日等信息中，设计者可以给使用者预备好选项，需要使用<option>标签来定义可供选中的每一项
<html>
<head>
<title>select对象的表单</title>
<style type="text/css">
select{
font:100% 微软雅黑;
color:Green;
}
</style>
</head>
<body>
<form action="some.php" method="post" enctype="multipart/form-data" name="myform">
<h3>地址</h3>
<select name="上海">
<option>黄浦区</option>
<option>虹口区</option>
<option>静安区</option>
<option>宝山区</option>
</select>
</form>
</body>
</html> 会员可以通过下拉列表框选中一个“地址”，而这个数据会被表单发送到效劳器，此外还可以通过value属性为每一个option指定不 同的值，这样的话value设定的值将代替option的文本内容。留意假如设计者但愿预先设定初始值，那么在所但愿的option中增加 selected="selected"就可以了，如<option selected="selected">浦东新区</option>,不然默许初始值应当是第一个显现的<option> 的文本内容。
假如下拉列表内内容太多，可以使用<optgroup>标签配合label属性来给选项分类
<select name="上海">
<optgroup label="Team1">
<option>黄浦区</option>
<option selected="selected">虹口区</option>
<option>静安区</option>
<option>宝山区</option>
</optgroup>
<optgroup label="Team2">
<option>长宁区</option>
<option>杨浦区</option>
<option>徐汇区</option>
<option>普陀区</option>
</optgroup>
</select>此外假如不但愿select对象以下拉列表框的情势展示出来，有一种方式可以将名目项以滚动条的样式展现出来，只需要在select 标签中参加size属性，如"size=6"表示是一个能容纳6行文字的文本框，当名目项超出设定的行数时将显现滚动条
<select name="上海" size="5">
<option>黄浦区</option>
<option selected="selected">虹口区</option>
<option>静安区</option>
<option>宝山区</option>
<option>长宁区</option>
<option>杨浦区</option>
<option>徐汇区</option>
<option>普陀区</option>
</select>五、表单域汇合
假如表单的项目过多或为了润饰表单部分，可以通过使用表单域将表单分组，表单域的代码由<fieldset>标签和<legend>标签组 合而成，默许状况下，<fieldset>标签勾画出表单域的框形，<legend>标签的对象像标题一样显现在框的左上角
<html>
<head>
<title>表单域</title>
</head>
<body>
<form action="some.php" method="post" name="myform">
<fieldset>
<legend>注册信息:</legend>
输入会员名:<input type="text" name="name" size=20 maxlength=12>
<!--这里可以放入很多样式的表单-->
</fieldset>
</form>
</body>
</html>相关引荐：
HTML 表单
HTML FORM 表单_html/css_WEB-ITnose
以上就是HTML表单是啥？HTML表单内容的具体介绍（附代码）的具体内容，更多请关注百分百源码网其它相关文章！
