前言：
而今小伙伴们对“htmlform大小”大体比较看重，看官们都需要了解一些“htmlform大小”的相关资讯。那么小编同时在网摘上汇集了一些对于“htmlform大小””的相关知识，希望大家能喜欢，咱们快快来了解一下吧！上一篇：Java 0基础入门 （Html标签的使用）
表单在网页中主要负责数据采集功能。
一.表单实际应用场景
百度搜索
5173注册
如上两张图，图中的黑色线条是我画上去的，如果按照黑线，在Excle中画出这两张表单，相信大家都可以也不是很难，那在Html中，我们同样也是画出这样的表单，最后将黑线隐藏即可。
二.表单包含的控件
具体写法：（插一句，Html代码中<!--xxxx-->,这样的内容，是注释内容，也就是代码执行的时候并不执行，只是类似看文言文时，旁边的注解一样）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- action:指定服务器端处理程序的路径（Java、.Net、PHP、Python、NodeJs……） method:提交方式,有get和post两种 get：会将表单中的值直接带在地址栏中 不安全 数据量有限制 post：不会将表单中的值带在地址栏中 更安全 数据量没有限制 --> <form action="; method="get"> <!-- 对于不同控件中的value属性值，一般就是服务器端要拿到的具体的值 --> <!-- 单行文本框： type属性：因为密码框、单选按钮、复选框也都是input 通过type属性来区分当前的input到底是什么 (如果input不指定type属性值，默认取值为text) value：指定单行文本框的初始值 --> <p> 单行文本框：<input type="text" value="初始值"/> </p> <p> <!-- placeholder:当没有内容时默认显示的内容，随着用户的输入，会消失 如果清空输入吗，会再次出现 plcaceholder和value的区别在于： placeholder不能通过用户输入直接改变内容 value提供的值用户是可以改变的 maxlength：限制输入字符的最大长度 *name:相当于给控件起个名字，服务器端可以根据这个名字，来区分每一项数据代表什么含义 --> 单行文本框：<input type="text" placeholder="初始值" maxlength="5" name="txt"/> </p> <!-- 密码框 type:password密码框 单行文本框中能用的属性，密码框也都能用 --> <p> 密码框：<input type="password" placeholder="请输入密码" name="pwd" maxlength="6"/> </p> <!-- 单选按钮 type:radio 单选按钮 checked="checked"默认选中当前项 name在radio中的作用： (1)服务器端用来识别数据 (2)用来描述同一组信息的内容只选中其中一个，用来分组，产生互斥 --> <p> <!-- <label>:如果要点击单选按钮后面的字也能够选中单选按钮，就使用 该标签将单选按钮以及文字都包裹在一起 --> <label> <input type="radio" checked="checked" name="sex" value="0"/>男 </label> <label> <input type="radio" name="sex" value="1"/>女 </label> </p> <!-- 复选框 type：checkbox name：用来对同一组相同含义的checkbox分组，就算给了name，也能够一次性选中多个 --> <p> <input type="checkbox" name="hobby" value="0"/>跑步 <input type="checkbox" name="hobby" value="1"/>打球 </p> <!-- 按钮 input --> <p> <!-- 重置按钮 type="reset" value:按钮中要显示的文本，一般不需要传递给服务器端 重置不是简单的清空，而是回到页面最原始的状态 --> <input type="reset" value="重置"/> <!-- 提交按钮 type="submit" value:按钮中要显示的文本，一般不需要传递给服务器端 --> <input type="submit" value="提交" /> <!-- 普通按钮：type="button" 普通按钮本身不具有任何的特殊行为，其行为一般需要通过js脚本来绑定 --> <input type="button" value="普通按钮" onclick="alert('这是一个普通按钮');"/> <!-- 图片按钮：type="image" 通过图片来制作按钮，相当于提交按钮 --> <input type="image" src="001.jpg" /> <!-- 注意：对于提交按钮和重置按钮，如果放在form元素以外的地方， 是无法对表单进行重置或提交操作的 --> </p> <!-- 多行文本框 textarea (文本域) cols：列数 rows：行数 name:用于在服务端获取数据时使用 注意：文本域中的默认内容应该写在标签之间，而不是value属性中 这一点和当行文本框是有区别的 placeholder:文本域为空时的默认内容 --> <p> <textarea cols="10" rows="20" placeholder="默认值">dsadasdas</textarea> </p> <!-- 文件域 input type="file" --> <p> <input type="file" /> </p> <!-- 隐藏域 input type="hidden" 不希望用户看到，但是程序处理时需要的数据，可以放在隐藏域中 --> <p> 隐藏域：<input type="hidden" /> </p> <!-- 下拉列表框<select> 下拉列表中的每一个子选项 --> <p> <select> <option>====请选择====</option> <option>江苏</option> <option>浙江</option> <option>上海</option> </select> </p> <!-- select标签的multiple="multiple"属性 将原本通过箭头点击的方式显示改为一次性就显示若干个 并且可以一次性选中多项 --> <p> <select multiple="multiple"> <option>====请选择====</option> <option>江苏</option> <option>浙江</option> <option>上海</option> <option>山东</option> <option>安徽</option> <option>福建</option> </select> </p> <!-- 按钮 button HTML5新特性 1、和input按钮的第一个区别： input要显示的文本在value属性中 button要显示的文本在标签之间 button如果没有指定类型，默认就是一个提交按钮 2、和input按钮的第二个区别： input按钮中的文本只能是普通文本 button标签之间写的任何html内容都能作为按钮的外观 --> <p> <button type="submit">提交按钮</button> <button type="reset">重置按钮</button> <button type="button" onclick="alert('普通button按钮');">普通按钮</button> <button> <h1>标题按钮</h1> </button> </p> <!-- 表单元素中的两个常用属性 (1)前端：都只能看不能改 (2)后端：readonly的控件值可以获取到，但是disabled不行 --> <input disabled="disabled" value="默认值"/> <input readonly="readonly" value="默认值"/> </form> </body></html>三.表单的基本结构
<form action="; method="post">
……
</form>
action：指定提交后，由服务器上哪个处理程序处理，是一个路径，绝对路径，相对路径都可以。
method：指定向服务器提交的方法，一般为post或get方法, post方法比较安全，且能传输的数据量更大
四.表单的基本语法
<form action="login.aspx" method="post">
<p>用户名：
<input name="username" type="text"/>
</p>
<p>密 码：
<input name="pwd" type="password" />
</p>
<p>
<input type="submit" name="btn" value="提交" />
</p>
</form>
表单输入元素：input，当然也有其它的。
五.表单的执行原理（了解即可）
客户端（比如：我们打开的网页）请求登陆，填写表单信息，点击某按钮提交→数据传输到服务器，服务器会执行后端代码（后续会讲到），验证发来的信息，给出反馈（比如：通过；不通过）→客户端接收服务器的反馈，在页面上显示出来。
举个例子：
一个客户去某店买东西，客户（客户端）说我是你们会员，提供了姓名，手机号（这就类似填写表单的一个过程），然后店员（服务器）根据你提供的姓名和手机号，查到了你的会员信息，然后告诉你（反馈）已经查到，确实是本店会员。
通过举例，希望大家能通俗的了解表单的执行原理。
六.表单的元素
1.文本框
<input name= "userName" type= "text" value= "123456" maxlength="5">
type：指定input的类型，如果为text表示普通文本框
value：文本框中的初始值
maxlength：最大能够输入的字数
name：name属性对于表单元素的作用，在于让服务器能够得到表单元素中输入的值，例如request.getParameter(“userName”)，之后的文章中会讲。
还有一个有用的placeholder属性，同样为初始值，区别于value，以灰色显示，且在输入内容时会自动被所输入的内容覆盖，清空输入内容后，又会显示出来，类似于一个提醒的作用。可自行尝试下。
2.密码框
<input name= "userPwd" type="password" value="" maxlength="4">
type：指定input的类型，如果为password表示密码框
value：密码框中的初始值
maxlength：最大能够输入的字数
name：name属性对于表单元素的作用，在于让服务器能够得到表单元素中输入的值，例如request.getParameter(“userPwd”)，之后的文章中会讲。
3.按钮
<input type="reset" value="重填"/>
<input type="submit" value="提交" />
<input type="button" value="普通按钮" />
<input type="image" src="images/login.gif" value="图片按钮" />
type的取值不同代表不同类型的按钮，对于提交按钮会提交表单，重置按钮可以清空表单内容，但是其它类型的按钮，具体实现什么功能，只能通过后面学习脚本以后才能进行处理，value属性表示按钮上显示的文本，name属性的主要作用体现在后期脚本的绑定上
4.button按钮
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
写法：<button type = "button">开</button>
5.单选按钮
<input name="gen" type="radio" value="男" checked="checked">
<input name="gen" type="radio" value="女" >
input的type取值为radio时，表示单选按钮
name属性除了能够让服务器获取选中的单选按钮信息外，还能将单选按钮进行分组
checked=”checked”表示选中状态，同一组单选按钮，其中选中状态的按钮最多只有一个
value表示最后服务端真正能获取到的值。并不是显示在单选按钮外边的内容。
还可以在外边嵌套<label></label>标签提升用户体验
6.复选框
<input type="checkbox" name="hobby1" value="sports" />
<input type="checkbox" name="hobby2" value="talk" checked="checked" />
<input type="checkbox" name="hobby3" value="play" />
input的type取值为checkbox时，表示复选框
name属性除了能够让服务器获取选中的复选框信息外，还能将复选框进行分组
checked=”checked”表示选中状态，同一组复选框，其中，选中状态的可以任意多个
value表示最后服务端真正能获取到的值。并不是显示在复选框外边的内容。
还可以在外边嵌套<label></label>标签提升用户体验
7.文本域
用来输入多行文本
写法：<textarea name="" cols="10" rows="20">12345</textarea>
name:用于在服务端获取数据时使用
cols：列数
rows：行数
值得注意的是：textarea中的内容应该写在标签之间，而不是value属性中！！！如上述写法中，“12345”即为多行文本框的内容。
8.文件域
<input type="file" name= "uploadFile">
<input type="submit" name="upload" value="上传" />
当input的type为file时，表示文件上传按钮，一般会和提交按钮一起使用，此处不做太多说明，文件具体上传时需要学习服务端编程后方可掌握。
9.列表框
<select name="bmon">
<option value="" selected="selected">
[选择月份]
</option>
<option value="0">一月</option>
<option value="1">二月</option>
<option value="2">三月</option>
<option value="3">四月</option>
</select>
select：name属性，列表名称，用于服务器获取选中项
option是列表下面的每一个小项，value属性是服务器能获取到的具体的值，<option>标签之间是呈现给用户的选项信息，selected="selected"表示该项选中。
10.隐藏域
方便“记住”一些供服务端使用的信息、但又不希望客户看到的数据
<input type="hidden" name="…." value="…" />
主要就是type属性为hidden，其他属性与input框的属性填写相同。
七.表单中的一些属性
只读和禁用属性
readonly：希望某个框内的内容只允许用户看，不能修改
disabled：因没达到使用的条件，限制用户使用
<textarea readonly="readonly"></textarea>
<input type="text" readonly="readonly" />
<input type="text" disabled="disabled" />
上面的属性也可用于其它表单元素，达到只读或禁用的效果。
form 表单中disabled属性的元素不参与表单提交，也就是表单submit后，后台无法获取有disabled属性元素的值。
八.HTML5 新的 input 类型及支持的浏览器
HTML5 新的 input 类型及支持的浏览器
九.音频标签
写法：
<audio src="Nightwish-She Is My Sin.mp3" controls="controls" autoplay="autoplay" loop="loop">
暂不支持此标签
</audio>
src：要播放的音频的 URL。
autoplay：如果出现该属性，则音频在就绪后马上播放。
loop：如果出现该属性，则每当音频结束时重新开始播放。
controls：若出现该属性，则向用户显示控件，比如播放按钮。
暂不支持此标签，是在你使用的浏览器，不支持的情况下显示。
具体浏览器的兼容性，见下图
audio标签各浏览器兼容情况
十.视频标签
写法：
<video src="; controls="controls" autoplay="autoplay" loop="loop" width="1000px">
您的浏览器不支持video标签
</video>
src：要播放的视频的 URL。
controls="controls" 若出现该属性，则向用户显示控件，比如播放按钮。
loop="loop" 循环播放
autoplay="autoplay" 自动播放
width、height:指定视频窗口的大小
相比音频标签，可以添加width和height指定视频窗口大小
标签： #htmlform大小 #nodejs循环读取plc数据
