欢迎光临
我们一起进阶

python-html基础操作(四)Form表单Table 表格

扫码或搜索:沉默王二
发送 290992
即可立即永久解锁本站全部文章

Form表单 提交数据
提交到form表单里的 可以是selected,input,textarea标签里的数据

action参数:规定当提交表单时向何处发送表单数据。

select:

<form action="http://127.0.0.1:8000/formapp/index/">
        <select name="city">  #这里的name相当于字典的key
                <option value="111">深圳</option>   #value是给key取名
                <option value="222">广州</option>
                <option value="333">惠州</option>
        </select>
        <input type="submit" value="提交">
    </form>

django,views.py配置:
def index(request):
    print("POST:",request.POST)
    print("GET:",request.GET)
    return HttpResponse('ok')
#点击提交按钮之后,查看:
POST: <QueryDict: {}>
GET: <QueryDict: {'city': ['111', '222', '333']}>
"GET /formapp/index/?city=111&city=222&city=333  HTTP/1.1" 200 2
如果没有设置value值:

"GET /formapp/index/?city=%E6%B7%B1%E5%9C%B3&city=%E5%B9%BF%E5%B7%9E&city=%E6%83%A0%E5%B7%9E HTTP/1.1" 20
0 2
input-text类型:
<form action="http://www.baidu.com">  #action指定提交的位置,把数据提交到百度
    <div>主机名:<input name="host" type="text" value="127.0.0.1"></div>   #value设置一个默认值  
    <div>端口:<input name="port" type="text"></div>  #必须指定name,提交数据到后台,是以字典的形式,name就是key
    <div>密码:<input name="password" type="password"></div>
    <input type="submit" value="提交">  #提交按钮
</form>
#action指定提交的位置,把数据提交到百度

主机名:

#value设置一个默认值

端口:

#必须指定name,提交数据到后台,是以字典的形式,name就是key

密码:

#提交按钮

input-radio类型:
<h1>性别</h1>
        <label for="boy">男:</label>#lable标签
        <input name="gender" type="radio" id="boy" value="0"> #name="gender"是key,value是值
        <label for="girl">女:</label>
        <input name="gender" type="radio" id="girl" value="1">
        <input type="submit" value="提交">

input-checkbox类型:
 <form action="http://127.0.0.1:8000/formapp/index/" >
         <label>
            篮球<input name="favor" type="checkbox" value="1">
            足球<input name="favor" type="checkbox" value="2">
            羽毛球<input name="favor" type="checkbox" value="3">
        </label>
        <input type="submit" value="提交">
    </form>
input-file类型: (需要加上enctype=”multipart/form-data” method=”post”)
<form action="http://127.0.0.1:8000/formapp/index/" enctype="multipart/form-data" method="post">
        <input type="file" name="upload_file">
        <input type="submit" value="提交">
    </form>
测试django,views.py
def index(request):
    print("FILE:",request.FILES)
    print("POST:",request.POST)
    print("GET:",request.GET)
结果:
FILE: <MultiValueDict: {'upload_file': [<InMemoryUploadedFile: test.txt (application/octet-stream)>]}>
POST: <QueryDict: {}>
GET: <QueryDict: {}>
[03/Jan/2019 15:58:09] "POST /formapp/index/ HTTP/1.1" 200 2
lable标签 点击关键字,会自动选中对应的框
 <label>
        姓名:<input type="text">
    </label>
    <label for="hunfou">婚否:</label>   #for参数的值等于id的值
    <input id="hunfou" type="checkbox">



例二:
“`



<input id="radioA" type="radio" name="agree" value="1" checked="checked">
    <label for="radioA">我同意</label>
    <input id="radioB" type="radio" name="agree" value="0">
    <label for="radioB">我不同意</label>

##### Table 表格 
###### tr 代表行   td列(必须包含在tr行里面)

# border加边框的#表头#行#头部里的列,th#表内容

姓名 年龄 性别
张一 28
张二 20
<table border="2"> 
        <thead> 
            <tr>    
                <th>姓名</th>  
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>    
            <tr>
                <td>张一</td>
                <td>28</td>
                <td>男</td>
            </tr>
            <tr>
                <td>张二</td>
                <td>20</td>
                <td>女</td>
            </tr>
        </tbody>
    </table>

###### ul  ol  dl  li  列表相关
    • 111

#li列表

  • 222
<ol>
    <li>abc</li>
    <li>def</li>
</ol>
<dl>
    <dt>dt标题一</dt>
    <dd>内容一</dd>
    <dd>内容二</dd>
    <dt>dt标题二</dt>
    <dd>dd内容一</dd>
    <dd>内容二</dd>
</dl>
<ul>
        <li>111</li>   #li列表
        <li>222</li>
    </ul>
    <ol>
        <li>abc</li>
        <li>def</li>
    </ol>
    <dl>
        <dt>dt标题一</dt>
        <dd>内容一</dd>
        <dd>内容二</dd>
        <dt>dt标题二</dt>
        <dd>dd内容一</dd>
        <dd>内容二</dd>
    </dl>

###### fieldset  就是下面这个框框
内容

#框框上的字

段落1:
段落2:

“`

内容
段落1:
段落2:

赞(0) 打赏
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

小白学堂,学的不止是技术,更是前程

关于我们免责声明

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏