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，如需轉載請自行聯系原作者