html中input、label、form、textarea、select

表單input：表單是用來收集信息的，由表單控件(表單元素)、提示信息、表單域構成。

input控件的屬性及值：

除以上屬性外，input元素type屬性還有一個number屬性值，此為僅可以填數字，默認是可以選擇或者填寫任意數字，但是當type屬性為number屬性值時，可以使用max和min屬性來限制數字的取值范圍，input更多屬性見HTML5

 <input type="number" min="0"> <!-- min屬性限定最小值為0 -->

label標簽：

label標簽是為input標簽服務的，用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點


    <label> <!-- 1、直接使用label標簽包裹要點擊的元素獲得焦點 -->
        姓名：<input type="text">
    </label>
    
    <label for="name">姓名：</label> <!-- 2、使用label標簽的for屬性找input元素獲得焦點 -->
    <input id="name" type="text"/>

表單域form：

form元素用于創建一個表單，form中的所有內容都會被提交給服務器;默認form標簽中需要有一個submit按鈕，如果form里面沒有submit按鈕，那么可以使用button中type屬性為submit的button按鈕，這個buttont按鈕可能不在form表單中，此時可以給type屬性值為submit的button添加form屬性，值為form表單的id值，如：


     <form action="" method="get" name="" id="userform"> <!-- action屬性是指定表單提交給后端的地址，method屬性設置提交方式，其屬性值有post和get,name屬性用來給表單域定義名字，用于區分表單域 -->
      姓名：<input type="text">
      年齡：<input type="number" min="0">
    </form>
    <button type="submit" form="userform">提交</button>

文本域textarea：

input元素只能顯示一行內容，textarea元素可以顯示多行，一般做留言效果使用，常常被稱為富文本域。


     <!-- rows屬性限定行數，當行數超過限定后會出現滾動條，cols屬性限定的是列數，當超過限定后會換行。 -->
    <textarea cols="20" rows="10"></textarea>

UEditor：在實際開發中如果需要用到比較復雜的富文本域（類似word的，可以上傳視頻圖片等功能）推薦使用第三方插件，這里推薦大家一款使用的富文本插件：UEditor,使用它可以在網頁中實現類似word等編輯，如果想要了解更多及方法請查閱官方文檔：http://fex.baidu.com/ueditor/，當然類似的富文本編輯器還有很多，如：CKeditor：https://ckeditor.com/等

富文本編輯器可以自己做，其原理是利用document的execCommand()方法，這個方法實際開發中很少用，已經廢棄，所以一般很少有人了解，如果想要了解更多，可閱讀官方文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

下拉列表(下拉菜單)select：


    <body>
        <select name="" id="">
            <optgroup value="" label="分組1"><!-- optgroup標簽用來分組 -->>
                <option value="">
                    測試1
                </option>
                <option value="">
                    測試2
                </option>
                <option value="">
                    測試3
                </option>
            </optgroup>
            <optgroup value="" label="分組2">
                <option value="">選項1</option> <!-- select默認選擇第一個option，當給option加selected屬性時，則會選中此項顯示 -->
                <option value="" selected="selected">選項2</option> <!-- selected屬性的selected屬性值可以省略，其效果不變-->
                <option value="">選項3</option>
            </optgroup>
          </select>
    </body>

塊引用標簽：

有的時候會引用名人名言等，此時建議使用引用標簽，引用標簽分為長引用和短引用兩種，長引用標簽效果是插入換行和外邊距，短引用標簽的效果是加上虛擬的引號。


    <blockquote>海上生明月，天涯共此時。</blockquote><!-- 長引用標簽 -->
    
    <q>引號</q><!-- 段引用會給內容加上虛擬的引號，這個引號根本不存在。 -->

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。

筆者：苦海123

其它問題可通過以下方式聯系本人咨詢：

QQ：810665436

微信：ConstancyMan

要：禁止input緩存，禁止select緩存

有時候，我們頁面的輸入框，我們再頁面里輸入內容后，并不保存，但是刷新頁面會發現值為輸入的頁面，完全沒有從新去從后臺取值，這是怎么回事呢？如下：

雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆

<input type="text" value="">
<select>
<option value="1">1</option>
<option value="2">1</option>
</select>

其實多數瀏覽器默認會緩存input的值，只有使用ctl+F5強制刷新的才可以清除緩存記錄。如果不想讓瀏覽器緩存input的值，很簡單，只需要價格屬性即可：autocomplete=”off”。

例如上面例子，改為如下就不會緩存啦：

<input type="text" autocomplete="off" value="">
<select autocomplete="off">
<option value="1">1</option>
<option value="2">1</option>
</select>

聽說還有一種直接加在form表單里也可以，但是因為我已經很久沒有用form表單提交數據啦，都是用ajax異步提交的，所以我就沒有采取這種方法，也很簡單的如下：

<form action="#" autocomplete="off">  
<input type="text" value/>  
</form>

當然，沒試過不知道行不行，應該是沒問題的！

一、input標簽

用法：<input type="表單類型" />

二、單行文本框text屬性

舉例：

<form method="post">
        文本內容：<input type="text" />
    </form>

效果

屬性：

vlaue 設置文本框的默認值，也就是默認情況下的文本框

size 設置文本框的長度

maxlength 設置文本框最多可以輸入的字符數

vlaue舉例：

<form >
	文本內容：<input type="text" value="請輸入"/>
</form>

size舉例：

<form >
	文本內容：<input type="text" value="請輸入" size="1"/><br />
	文本內容：<input type="text" value="請輸入" size="5"/>
</form>

maxlength舉例

<form >
	文本內容：<input type="text" value="請輸入" size="1"/><br />
	文本內容：<input type="text" value="請輸入" size="5" maxlength="5"/>
</form>

二、密碼文本框password屬性

屬性同單行文本框，不同的是單行文本框可見，這個不可見

舉例：

<form >
	賬戶：<input type="text" /><br />
	密碼：<input type="password"/>
</form>

三、單選框radio屬性

舉例：

注意,name屬性必須要一樣，要不不能成為單選按鈕，value屬性也要寫上，給后端看的

<form >	
	性別選擇:<input type="radio" name="性別" value="男"/>男
	         <input type="radio" name="性別" value="女"/>女	
</form>

如果想要默認男，用checked屬性，舉例

<form >	
	性別選擇:<input type="radio" name="性別" value="男" checked=""/>男
	         <input type="radio" name="性別" value="女"/>女	
</form>

四、復選框checkbox屬性

屬性同單選框，不同的是單選框能選擇一個，復選框可以選擇多個

語法：<input type="checkbox" name="組名" value="取值" />

舉例：

<form >	
	月份選擇:<input type="checkbox" name="mouth" value="1月"/>1月
	         <input type="checkbox" name="mouth" value="2月"/>2月         
	         <input type="checkbox" name="mouth" value="3月"/>3月
	         <input type="checkbox" name="mouth" value="4月"/>4月
	         <input type="checkbox" name="mouth" value="5月"/>5月
	         <input type="checkbox" name="mouth" value="6月"/>6月
	         <input type="checkbox" name="mouth" value="7月"/>7月
</form>

五、按鈕

普通按鈕button 提交按鈕submit 重置按鈕reset

語法：<input type="button" value="取值" />

舉例：

<form >	
	月份選擇:<input type="checkbox" name="mouth" value="1月"/>1月
	         <input type="checkbox" name="mouth" value="2月"/>2月         
	         <input type="checkbox" name="mouth" value="3月"/>3月
	         <input type="checkbox" name="mouth" value="4月"/>4月
	         <input type="checkbox" name="mouth" value="5月"/>5月
	         <input type="checkbox" name="mouth" value="6月"/>6月
	         <input type="checkbox" name="mouth" value="7月"/>7月
	         <input type="reset" value="重置">
</form>

3種按鈕雖然從外觀上看起來是一樣的，但是實際功能卻是不一樣的。最后，我們總結一下普通按鈕、提交按鈕以及重置按鈕的區別。

（1）普通按鈕一般情況下都是配合JavaScript來進行各種操作的。

（2）提交按鈕一般都是用來給服務器提交數據的（當前的form)。

(3）重置按鈕一般用來清除用戶在表單中輸入的內容（當前的form)。

六、文件上傳file

語法：<input type="file" />

在線咨詢

上一篇：html基礎必備-圖像標記，前端小白一看就會
下一篇：國內的瀏覽器和國外瀏覽器相比都有哪些優勢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html中input、label、form、textarea、select

您的項目需求

html中input、label、form、textarea、select