HTML之表单元素

表单元素可能会是你在网页中最常用到的，因为你经常见到，比如说在网页里登录自己的个人信息啊，如QQ，以及各类游戏账号（泛指页游）等等。

所以呢，接下来来看看表单元素吧
1.首先呢，就是最基本的文本框

<input type="text">简单文本框

就是这样
如果你想设置文本框的长度，在type标签后加上size=“数值”，如果你想文本框有初始值，也可以在type标签结束后加上 value=“有初始值的文本框”。
2.看看密码框吧，你输进去的数据都能变成******，就像你是个**，哈哈哈哈哈哈哈
密码框的格式如下：

<input type="password">简单密码框

3.有个背景文字大家都知道里面应该输些啥，怎么设置背景文字？？
你就这样：在type标签结束后加上placeholder=“所提示信息”，这样就可以知道框里应该输账号还是密码，还是一些其他的东西了

代码如上图，效果如下图

怎么样，是不是更能理解密码框了呢

4.接下来就该表单了
（1）表单
首先用到文本框和密码框，然后怎么用到表单呢，在你输入账号和密码后需要登录吧，这时候就要用到form了，怎么用呢，代码在下边了

<form action="网址">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

至于为什么会用到name，这里第一个name="name"指的是为第一个输入方框赋一个属性名叫name，方便后面跳转到action定位到的网页时后台程序Controller操作时捕获第一个框的数据
这里第一个name="password"指的是为第二个输入方框赋一个属性名叫password，方便后面跳转到action定位到的网页时后台程序Controller操作时捕获第二个框的数据 ，然后看见submit了吗？那是提交按钮，后面说按钮的时候会提到，现在不深入说了。
表单呢，有两种提交方式：一种是method=“get”（默认模式），这种方式，可以在地址栏看到提交的参数。而另外一种就是method=“post”，这种方式上传的是二进制数据，这种方式不显示参数，上传文件必须用这种方式。

下面就是各种框了（什么单选框，复选框，下拉列表，文本域等等）
（2）老样子，按顺序说说吧，单选框格式如下

单选1 <input type="radio" >
单选2 <input type="radio" >

在单选过后，而且这种方式虽然叫单选，但是可以达到同时选中的效果，不可被取消单选。非常不方便，所以如果你想做到单选，要分组。说白了，就是给他加个名字name，然后给name赋上值activity（并不是非得是activity，只要属性相同就行）你在看选项时，有时候会出现默认选中的情况吧，怎么使得默认选中呢，在单选框type标签的后面加上checked=“checked”就好了。

复选框呢
和单选格式差不多，只是要把type里面的值变成checkbox（正方形的小盒子），
看图说话，先单选

复选框

后面要用到的时候再给大家看看吧
（3）接下来讲讲下拉列表，这个东西比较常见，就比如说你在注册一些账号时，一些信息（出生日期啊什么的，就会用到下拉列表）
格式如下`

<select >
 <option >1</option>
 <option >2</option>
 <option >3</option>
</select>

要设置列表的可见高度的话可以在select标签中增加size=“数值”就可以设置选项可见高度了。或者在select中加入multiple=“multiple”，可以实现下拉列表中的多选，对option元素selected将某一项默认选中。

（4）按顺序下来是文本域了吧，文本域怎么说呢，我现在暂时感觉没派上用场，（我感觉有用的就是滚动条）但还是说说格式

<textarea>文本域</textarea>

文本域可以有多行，可以在textarea标签内设置宽度（cols=“数值”，意思就是每行最多n个字符，n是你给的数值）以及行数（rows=“数值”），然而当你输入的数据超过所设行数后，文本域会从第一行开始从上往下进行数据覆盖。

5.按钮！按钮！按钮！
（1）按钮长什么样子，想必大家都见过，普通按钮格式：

<form action="网址" method="get">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="button" value="登陆"> <!--这里是按钮，看见button了吗-->
</form>

记住哦，普通按钮不具备提交功能！
（2）接下来讲个能提交的，提交按钮：
格式跟上面差不多就是把button变成submit就行了，这样这个按钮就具有提交功能了，就可以把数据交给后台了，会自动将表单的数据提交至网址，同时<input type="submit" value="登录">与<button type="submit">登录</button>是等价的。
而且普通按钮不具备刷新页面功能，而提交按钮具备刷新页面哦（此处页面是指按钮存在的页面）
（3）重置按钮：一个重置按钮只可以重置一个form里面的文本，它的格式就是把submit换成reset就行了。
（4）很多时候点击图片就能提交信息，所以最后讲一个图像提交按钮
图片提交也不是很难，你只需要把type的值改成image，然后后面跟上src=“图片路径”，像这样<input type="image" src="图片路径">就好了，一点击图片，触发action进行重定向了，这样你就完成了图片提交。

关于HTML的表单元素基础就说到这了，可能我说的很浅显，但是作为一个小白，希望这篇文章能够帮助到大家！！！