Html 表單標簽 Form


Html表單

#轉載請留言聯系

表單用於搜集不同類型的用戶輸入,表單由不同類型的標簽組成,相關標簽及屬性用法如下:

1、<form>標簽 定義整體的表單區域

  • action屬性 定義表單數據提交地址 例如:http://www.baidu.com
  • method屬性 定義表單提交的方式,一般有“get”方式和“post”方式

2、<label>標簽  label 標簽不會向用戶呈現任何特殊效果。不過,它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本,就會觸發此控件。就是說,當用戶選擇該標簽時,瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

3、<input>標簽 定義通用的表單元素

  • type屬性
    • type="text" 定義單行文本輸入框
    • type="password" 定義密碼輸入框
    • type="radio" 定義單選框
    • type="checkbox" 定義復選框
    • type="file" 定義上傳文件     form表單需要加上屬性enctype="multipart/form-data"
    • type="submit" 定義提交按鈕
    • type="reset" 定義重置按鈕
    • type="button" 定義一個普通按鈕
  • value屬性 定義表單元素的值,此值是數據提交時鍵的值
  • name屬性 定義表單元素的名稱,此名稱是提交數據時的鍵名
  • checked:  radio 和 checkbox 默認被選中
  • readonly: 只讀. text 和 password
  • disabled: 對所用input都好使.

4、<textarea>標簽 定義多行文本輸入框

name:    表單提交項的鍵.
cols:    文本域默認有多少列
rows:    文本域默認有多少行

5、<select>標簽 定義下拉表單元素

 name:表單提交項的鍵.

          size:選項個數

          multiple:多選項 

                 <option> 下拉選中的每一項 屬性:

                       value:表單提交項的值.   selected: selected下拉選默認被選中

                 <optgroup>為每一項加上分組

 

6、label 鼠標移到姓名上出輸入框

<label for="www">姓名</label>
<input id="www" type="text">

7.fieldset

<fieldset>
    <legend>登錄吧</legend>
    <input type="text">
</fieldset>

 

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="https://developer.mozilla.org/static/img/favicon32.7f3da72dcea1.png">
    <link rel="stylesheet" href="#">
    <title>Form表單注冊面學習</title>

</head>
<body>
<!--action 定義表單數據提交地址-->
<form action="http://127.0.0.1:8000/post_info" method="post" enctype="multipart/form-data">
    <!--單行文本框-->
    <input type="text" name="username" placeholder="請輸入賬號"><br><br>
    <!--密碼框-->
    <input type="password" name="password" placeholder="請輸入密碼"><br><br>
    <!--單選框-->
    性別:<label><input type="radio" name="sex" value="1"></label>
    <label><input type="radio" name="sex" value="2"></label>
    <!--多選框-->
    <br><br>
    最喜歡的游戲:
    <label><input type="checkbox" name="fav" value="LOL">英雄聯盟</label>
    <label><input type="checkbox" name="fav" value="shoot">噴射戰士</label>
    <label><input type="checkbox" name="fav" value="zelder">塞爾達傳說</label>
    <label><input type="checkbox" name="fav" value="mario">馬里奧</label>
    <!--上傳圖片-->
    <br><br>
    <input type="file" name="pic">
    <!--多行文本框-->
    <br><br>
    <textarea name="text" cols="30" rows="10"></textarea>
    <!--下拉列表-->
    <br><br>
    <select name="city">
        <option value="gz">廣州</option>
        <option value="sz">深圳</option>
        <option value="zh">中山</option>
    </select>
    <!--提交表單-->
    <input type="submit" value="提交">
    <!--重置表單-->
    <input type="reset" value="重置">
</form>
</body>
</html>

</body>
</html>

Django 接受表單提交的數據

# urls.py添加
url(r'^post_info$', views.post_info),


# views.py添加
def post_info(request):
    print(request.POST)
    print(request.GET)
    print(request.FILES)
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        f = open(fileObj.name, 'wb')
        iter_file = fileObj.chunks()
        for line in iter_file:
            f.write(line)
        f.close()
    return HttpResponse('ok')

 

 

參考:https://www.cnblogs.com/chichung/p/9664362.html

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM