html之input標籤（11）

時間 2019-11-17

標籤 html input 標籤欄目 HTML 简体版

原文原文鏈接

1.輸入框html

type=「text」就是一個簡單的輸入框python

<body>

<input type="text">

</body>

2.密碼輸入框後端

密碼輸入框的類型爲password，和text同樣就是一個輸入框，不過password類型的輸入框，輸入的內容是不能夠見的，不是明文服務器

<body>

<input type="password">

</body>

3.按鈕post

按鈕的類型爲button，若是隻寫一個類型，就只是一個按鈕，上面並無字，按鈕上面的字須要設置value，value的值就是按鈕上面的內容spa

button並不會提交東西到後臺，須要配合js使用code

<body>

<input type="button"  value="登陸">

</body>

4.提交按鈕orm

提交按鈕的類型爲submit，使用submit會將from表單中的內容提交到後端htm

<body>
     <input type="text">
    <input type="password">
    <input type="button" value="登陸1">
    <input type="submit" value="登陸2">
</body>

5.form 表單及提交到後端blog

整個from標籤內部是爲一個表單，action屬性爲提交到哪裏，能夠是http://localhost:8000/login方式，也能夠直接寫/login，method屬性設置提交方式，若是不寫，默認使用get方式提交（發送）數據

<body>
<form action="/login" method="post">
     <input type="text" >
    <input type="password" >
    <input type="button" value="登陸">
    <input type="submit" value="登陸">

</form>
</body>
1.使用submit會將from表單中的內容提交到後端
2.button並不會提交東西到後臺，須要配合js使用

6.input name屬性

name屬性用於後端獲取代碼獲取輸入的值

<body>
<form action="/login" method="post">
     <input type="text" name="user">
    <input type="password" name="pwd">
    <input type="button" value="登陸">
    <input type="submit" value="登陸">

</form>
</body>

注：用戶提交到後端的格式爲：
{'user'：'用戶輸入的用戶名’,'password':'用戶輸入的密碼'}
so,後端獲取用戶輸入的值（python）：
1.使用post方式提交

request.POST.get（'user'） =====  獲取到用戶輸入的用戶名

request.POST.get（'pwd'） =====  獲取到用戶輸入的密碼

2.使用get方式提交

request.GET.get（'user'） =====  獲取到用戶輸入的用戶名

request.GET.get（'pwd'） =====  獲取到用戶輸入的密碼

7.輸入框默認值

當type爲text和password時，也有個value屬性，設置value屬性後，輸入框會中默認的value的值

<body>
<form action="/login" method="post">
    <input type="text" name="user" value="admin">
    <input type="password" name="pwd">
    <input type="button" value="登陸">
    <input type="submit" value="登陸">
</form>
</body>

html頁面user輸入框中的默認值即admin
password和text value屬性相同

8.單選框

type爲radio時爲單選框，其中name屬性相同，爲互斥（即選擇一個，在選擇另外一個後，前一個將會被去掉不會被選中），value屬性用於提交到後端後，後端區分選擇的是哪個。

checked="checked"爲默認值，即默認哪個被選中

<body>
    <form action="/test" method="post">
        <div>
            <p>請選擇性別</p>
            男：<input type="radio" name="gender" value="1" checked="checked"> 
            女：<input type="radio" name="gender" value="2"> 
            <input type="submit" value="提交"> 
         </div> 
    </form> 
</body>

9.複選框

type爲checkbox時爲複選框，能夠多選，設置name屬性，每一個複選框的name相同，此時不互斥，而是爲了和其餘複選框區分開，value屬性用於後臺獲取選擇哪些值

checked="checked"爲默認值，即默認選中哪些。

<body>
    <form action="/test" method="post">
        <div>
            <p>請選擇性別</p>
            男：<input type="radio" name="gender" value="1" >
            女：<input type="radio" name="gender" value="2">
            <p>愛好</p>
            籃球：<input type="checkbox" name="favor" value="1">
            足球：<input type="checkbox" name="favor" value="2">
            皮球：<input type="checkbox" name="favor" value="3">
            <p>技能</p>
            打遊戲：<input type="checkbox" name="skill" value="1">
            寫代碼：<input type="checkbox" name="skill" value="2">
            <input type="submit" value="提交">
        </div>
    </form>
</body>

10.上傳文件

type爲file時爲上傳文件，依賴enctype="multipart/form-data"屬性，做用是把上傳的文件一點一點的發給服務器，後臺獲取數據請看python篇

  <form action="test" method="post" enctype="multipart/form-data">
        <input type="file" name="fname">
        <input type="submit" value="上傳">
    </form>

11.輸入內容或者選擇內容重置

type爲reset時，爲重置，點擊後重置當前from表單爲默認值

<input type="reset" value="重置">

相關標籤/搜索

每日一句

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