前端入门html(表单)

day48

配置Django项目：https://blog.****.net/zV3e189oS5c0tSknrBCL/article/details/79606994

value为先后端提交的内容

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <title>form表单</title>

 </head>

 <body>

 <form action="http://127.0.0.1:8000/upload/">

     <p>用户名：

         <input name="name" type = "text">

     </p>

     <p>密码：

         <input name="password" type = "password">

     </p>

     <p> 性别：

         <input name="gender" type="radio" value="1">男

         <input name="gender" type="radio" value="0">女

     </p>

     <p> 爱好：

         <input name="hobby" type="checkbox" value="basketball">篮球

         <input name="hobby" type="checkbox" value="football">足球

         <input name="hobby" type="checkbox" value="tai">台球

     </p>

     <select name="from1" id="s1">

         <option value="bj">北京</option>

         <option value="sh">上海</option>

         <option value="sc">四川</option>

     </select>

     <select name="from2" id="s2">

         <optgroup label="北京">

             <option value="cp">昌平</option>

             <option value="cy">朝阳</option>

             <option value="hd">海淀</option>

             <option value="ft">丰台</option>

         </optgroup>

         <optgroup label="上海">

             <option value="pdxq">浦东新区</option>

             <option value="mhq">闵行区</option>

             <option value="hpq">黄浦区</option>

         </optgroup>

         <optgroup label="四川">

             <option value="pzh">攀枝花</option>

             <option value="zg">自贡</option>

             <option value="my">绵阳</option>

         </optgroup>

     </select>

     <!--大段文本-->

     <p> <textarea name="info" id="t1" cols="30" rows="10">

     </textarea></p>

     <p>头像：

         <input type="file">

     </p>

     <p><input type="submit" value="提交"></p>

 </form>

 </body>

 </html>

页面显示：

前端入门html(表单)

运行Django,并提交后显示：

前端入门html(表单)

form表单相关内容
   前后端有数据交互的时候用form表单

   form表单提交数据的几个注意事项:
       1. 所有获取用户输入的标签都必须放在form表单里面
       2. action控制着往哪儿提交 (html中的第9行)
       3. input\select\textarea 都需要有name属性（提交结果需要键值对形式，如上图的运行结果）
       4. 提交按钮 <input type="submit">

小总结:
       input系列:
           text
               value        设置默认值
               placeholder 设置占位内容
                password

           radio 单选框
           checkbox 多选框

           date   日期
           datetime 时间

           file 文件

           button 普通按钮,多用JS给它绑定事件
           reset   重置
           submit 提交

           埋下伏笔:什么时候用 <input type="hidden">

       textarea    大段文本
       select      下拉菜单
       option      具体的下拉选项
       optgroup    分组的下拉框
       -label="上海"

表单属性

前端入门html(表单)

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8">

     <title>form表单</title>

 </head>

 <body>

 <!--action控制往哪提交  如果有上传文件固定格式method="post" enctype="multipart/form-data"-->

 <form action="http://127.0.0.1:8000/upload/" method="post" enctype="multipart/form-data">

     <!--readonly 只读能看不能改-->

     <p>

         <label for="i1">用户名：</label>

         <input id="i1" name="name" type = "text" readonly value="小强">

         <!--默认提示-->

         <input name="name" type = "text" placeholder="小强">

     </p>

     <p>密码：

         <input name="password" type = "password">

     </p>

     <p> 性别：

         <!--这种形式，单击 男 也可以进行选择，不需要点击圈圈-->

         <label for="r1">男</label>

         <input id="r1" name="gender" type="radio" value="1">

         <!--也可以写成这种形式-->

         <label>男<input name="gender" type="radio" value="1"></label>

         <input name="gender" type="radio" value="0">女

         <!--默认选项-->

         <input checked name="gender" type="radio" value="2">保密

     </p>

     <p>必须是email格式<input type="email" name="email"></p>

     <p> 爱好：

         <input name="hobby" type="checkbox" value="basketball">篮球

         <input name="hobby" type="checkbox" value="football">足球

         <input name="hobby" type="checkbox" value="tai">台球

     </p>

     <p>生日：<input name="birthday" type="date"></p>

     <select name="from1" id="s1">

         <option value="bj">北京</option>

         <!--默认选择-->

         <option value="sh" selected>上海</option>

         <option value="sc">四川</option>

     </select>

     <!--分组的下拉选项-->

     <select name="from2" id="s2">

         <optgroup label="北京">

             <option value="cp">昌平</option>

             <option value="cy">朝阳</option>

             <option value="hd">海淀</option>

             <option value="ft">丰台</option>

         </optgroup>

         <optgroup label="上海">

             <option value="pdxq">浦东新区</option>

             <option value="mhq">闵行区</option>

             <option value="hpq">黄浦区</option>

         </optgroup>

         <optgroup label="四川">

             <option value="pzh">攀枝花</option>

             <option value="zg">自贡</option>

             <option value="my">绵阳</option>

         </optgroup>

     </select>

     <!--大段文本-->

     <p> <textarea name="info" id="t1" cols="30" rows="10">

     </textarea></p>

     <p>头像：

         <input name="document" type="file">

     </p>

     <p><input type="submit" value="提交"></p>

     <!--重置-->

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

 </form>

 </body>

 </html>