html之input标签和form标签

input标签

input标签是自己闭合的

1

<code>&lt;</code><code>input</code> <code>/&gt;</code>

input系列有checkbox、redio、password、button、file等

1、type='text' 和type='password'

<code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>'text'</code> <code>/&gt;</code>

type='text' 和type='password' 

2

3

<code>用户名：&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code><code>/&gt;</code>

<code>&lt;</code><code>br</code><code>/&gt;&lt;</code><code>br</code><code>/&gt;</code>

<code>密  码：&lt;</code><code>input</code> <code>type</code><code>=</code><code>"password"</code><code>/&gt;</code>

<a href="https://s5.51cto.com/wyfs02/M02/8C/CE/wKiom1h4jtDzlFmhAAAj8wuCrnk811.png" target="_blank"></a>

限制输入长度：type='text' maxlength="3"

<a href="https://s4.51cto.com/wyfs02/M01/8C/CF/wKiom1h4lwrhYQYiAAAi_JGEHZY731.png" target="_blank"></a>

2、复选框： type='checkbox'

4

<code>兴趣爱好：</code>

<code>篮球: &lt;</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code><code>/&gt;</code>

<code>足球: &lt;</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code><code>/&gt;</code>

<code>排球: &lt;</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code><code>/&gt;</code>

<a href="https://s3.51cto.com/wyfs02/M01/8C/CA/wKioL1h4j9yja85MAAAhpCO3E8s333.png" target="_blank"></a>

3、单选按钮 type='radio'

<code>性别：</code>

<code>男： &lt;</code><code>input</code> <code>type</code><code>=</code><code>"radio"</code> <code>name</code><code>=</code><code>"gender"</code><code>/&gt; 女：&lt;</code><code>input</code> <code>type</code><code>=</code><code>"radio"</code> <code>name</code><code>=</code><code>"gender"</code><code>/&gt;</code>

<a href="https://s1.51cto.com/wyfs02/M02/8C/CE/wKiom1h4kF3jv6gmAAAZ6qFOwq0847.png" target="_blank"></a>

4、提交按钮：type='button'

<code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"button"</code> <code>value</code><code>=</code><code>"提交"</code><code>/&gt;</code>

<a href="https://s1.51cto.com/wyfs02/M01/8C/CE/wKiom1h4kL6xIcA0AAAU3P-fdS8014.png" target="_blank"></a>

5、submit 按钮：type='submit'

6、上传文件：type='file'

<code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"file"</code> <code>/&gt;</code>

<a href="https://s2.51cto.com/wyfs02/M02/8C/CE/wKiom1h4kS6C10XhAAAZNvWg65g539.png" target="_blank"></a>

7、多行的输出框：

<code>&lt;</code><code>textarea</code><code>&gt;这里可以输入多行信息&lt;/</code><code>textarea</code><code>&gt;</code>

<a href="http://s2.51cto.com/wyfs02/M01/8C/CF/wKiom1h4mweQYqjQAAAbMJCHQB4234.png" target="_blank"></a>

form标签：

&lt;form action="" method="get"&gt; &lt;/form&gt;

或

&lt;form action="" method="post"&gt; &lt;/form&gt;

Method的值为get时，是通过URL传内容与参数,这个时候我们通过网址URL能看见自己填写内容提交处理

Method的值为post时，是通过类似缓存传填写内容与参数，而URL是不能看到form表单填写内容提交内容。

button和submit的区别：

表单中button不会提交表单中的数据（除非做了定制，例如用JS定制），submit一定会提交数据。

<code>姓名：&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>maxlength</code><code>=</code><code>"10"</code><code>/&gt;</code>

<code>密码：&lt;</code><code>input</code> <code>type</code><code>=</code><code>"password"</code> <code>/&gt;</code>

<code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"submit"</code> <code>onclick</code><code>=</code><code>"alert(123)"</code> <code>value</code><code>=</code><code>"提交"</code> <code>/&gt;</code>

<a href="https://s5.51cto.com/wyfs02/M02/8C/CC/wKioL1h4pALj6vtAAABaDxPbvS8462.png" target="_blank"></a>

既然submit能提交数据，为什么还要有button呢？

submit对应from的方法为post，他是将数据提交到后台，而button对应的方法为get，比如在页面加一个button，value设置为刷新，那么button的意义是刷新页面，而没有向后台提交任何数据。

本文转自 曾哥最爱 51CTO博客，原文链接：http://blog.51cto.com/zengestudy/1891862，如需转载请自行联系原作者