input標籤

時間 2019-11-17

標籤 input 標籤简体版

原文原文鏈接

1、input標籤　

<body>
    <input type="text" name="user"/>
    <br />
    <input type="password" name="password"/>
    <br />
    <br />
    <input type="button" value="登入1" />
    <input type="submit" value="登入2" />
</body>

'''
 type:   
        text  文本輸入框
        
        password 密碼輸入框

        button   按鈕（須要配合js使用）
 
        subbmit   提交按鈕
'''

　　顯示以下：html

2、form表單提交

　　上面的內容是沒法提交的，雖然有提交按鈕，可是沒有提交到後臺的地址，這裏就須要使用form表單來提交了。　python

<body>
    <form action="http://localhost:8000" method="get">
        <input type="text" name="user"/>
        <br />
        <input type="password" name="password"/>
        <br />
        <br />
        <input type="button" value="登入1" />
        <input type="submit" value="登入2" />
    </form>
</body>

'''
  1. action: 指定要發送數據的後臺url地址

  2.  method: 提交表單使用的方法，有POST和GET, 默認爲GET方法
'''

　　注：web

　　input標籤中的內容要提交到後臺，必需要有一個name屬性，當點擊submit按鈕提交時，數據會被打包成一個字典的形式，{'user':'bigberg','password':'111111'},而後將這個數據提交到後臺瀏覽器

　　form標籤提交的內容只能是 input 和 select 標籤的內容緩存

　　POST和GET方法的區　　安全

	GET	POST
後退按鈕/刷新	無害	數據會被從新提交（瀏覽器應該告知用戶數據會被從新提交）。
書籤	可收藏爲書籤	不可收藏爲書籤
緩存	能被緩存	不能緩存
編碼類型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。爲二進制數據使用多重編碼。
歷史	參數保留在瀏覽器歷史中。	參數不會保存在瀏覽器歷史中。
對數據長度的限制	是的。當發送數據時，GET 方法向 URL 添加數據；URL 的長度是受限制的（URL 的最大長度是 2048 個字符）。	無限制。
對數據類型的限制	只容許 ASCII 字符。	沒有限制。也容許二進制數據。
安全性	與 POST 相比，GET 的安全性較差，由於所發送的數據是 URL 的一部分。服務器在發送密碼或其餘敏感信息時毫不要使用 GET ！app	POST 比 GET 更安全，由於參數不會被保存在瀏覽器歷史或 web 服務器日誌中。
可見性	數據在 URL 中對全部人都是可見的。	數據不會顯示在 URL 中。

3、input表單類型和屬性

　　3.1 文本框的默認值post

<input type="text" name="user" value="哈士奇"/>
<br />
<input type="password" name="password" value="hashiqi"/>

　　3.2 單選框radio　編碼

<body>
    <div>
        <p>性別</p>
        <span>男:</span><input type="radio"/>
        <span>女:</span><input type="radio"/>
    </div>
    <br />
    <input type="submit" value="提交" />
</body>

顯示以下：　　　　

　　咱們能夠添加name屬性，並將name屬性設置爲同樣，那麼單選框就能保證只能選擇一個了，以下：　

<body>
    <div>
        <p>性別</p>
        <span>男:</span><input type="radio" name="gender"/>
        <span>女:</span><input type="radio" name="gender"/>
    </div>
    <br />
    <input type="submit" value="提交" />
</body>

'''
 name屬性設置同樣，就能實現單選的功能
'''

顯示以下：

　　上面的內容若是提交到後臺，仍是不能區分gender指的是男仍是女，因此仍是須要設置一個value值：

<body>
    <form>
        <div>
            <p>性別</p>
            <span>男:</span><input type="radio" name="gender" value="1"/>
            <span>女:</span><input type="radio" name="gender" value="2"/>
        </div>
        <br />
        <input type="submit" value="提交" />
    </form>
</body>


'''
 用value值來區分單選框選擇的具體值
'''

　　設置默認值checked="checked"：

<span>男:</span><input type="radio" name="gender" value="1" checked="checked"/>
 <span>女:</span><input type="radio" name="gender" value="2"/>

'''
    checked="checked" 設置默認
'''

　　3.3 多選框checkbox　　

<body>
    <form>
        <div>
            <p>愛好</p>
            <span>足球</span> <input type="checkbox" name="favor" value="1">
            <span>藍球</span> <input type="checkbox" name="favor" value="2">
            <span>棒球</span> <input type="checkbox" name="favor" value="3">
            <span>網球</span> <input type="checkbox" name="favor" value="4">
        </div>
        <input type="submit" value="提交">
    </form>
</body>

'''
  一樣以value的值來肯定不一樣的選項
  一樣可使用 checked="checked" 來設置默認值 
'''

　　3.4 文件上傳file

<body>
    <form enctype="multipart/form-data">
        <div>
            <p>上傳文件</p>
            <input type="file" />
        </div>
        <input type="submit" value="提交">
    </form>
</body>

'''
 file 提交文件：form表單須要加上屬性enctype="multipart/form-data" 
            
 上傳文件注意兩點：

    1 請求方式必須是post
    2 enctype="multipart/form-data"
  
'''

　　3.5 重置reset　

<body>
    <form>
        <div>
            <input type="text" name="user"/>
            <br />
            <input type="password" name="password"/>
        </div>
        <input type="submit" value="提交">
        <input type="reset" value="重置"/>
    </form>
</body>

'''
 重置按鈕能夠將輸入的信息清空
'''

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。