Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 作业-html基础-表单制作
Blogger Information
Blog 6
fans 0
comment 1
visits 3282
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
作业-html基础-表单制作
@大城
Original
681 people have browsed it

1.表单源代码

  1. html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>4月4日作业</title>
  8.   </head>
  9.   <body>
  10.     <!-- 产品基础信息 -->
  11.     <form action="index.php" method="post">
  12.       <fieldset>
  13.         <legend>基础信息</legend>
  14.         <section>
  15.           <label for="goods_name">产品名称</label>
  16.           <input
  17.             type="text"
  18.             name="goods_name"
  19.             id="goods_name"
  20.             placeholder="不少于8位不大于30位"
  21.             value=""
  22.             required
  23.             autofocus
  24.           />
  25.         </section>
  26.         <section>
  27.           <label for="goods_title">简略标题</label
  28.           ><input
  29.             type="text"
  30.             name="goods_title"
  31.             id="goods_title"
  32.             placeholder="不少于8位不大于30位"
  33.             value=""
  34.           />
  35.         </section>
  36.         <section>
  37.           <label for="status-1">上架状态</label>
  38.           <div>
  39.             <input
  40.               type="radio"
  41.               name="goods_status"
  42.               id="status-1"
  43.               value="1"
  44.             /><label for="status-1">上架</label>
  45.             <input
  46.               type="radio"
  47.               name="goods_status"
  48.               id="status-2"
  49.               value="2"
  50.             /><label for="status-2">下架</label>
  51.           </div>
  52.         </section>
  53.         <section>
  54.           <label for="goods_cate">产品分类</label>
  55.           <input type="text" name="goods_cate" list="goods_cate" />
  56.           <datalist id="goods_cate">
  57.             <!-- 此<option>使用单标签,与<select>中不同 -->
  58.             <option value="电水壶"> </option>
  59.             <option value="破壁机"> </option>
  60.             <option value="电饭盒"> </option>
  61.             <option value="养生壶"> </option>
  62.           </datalist>
  63.         </section>
  64.         <section>
  65.           <label for="modou">产品品牌:</label>
  66.           <div>
  67.             <!-- 允许返回多个值,属性名采用数组格式,便于后端处理 -->
  68.             <input
  69.               type="checkbox"
  70.               name="brand[]"
  71.               id="modou"
  72.               value="魔豆"
  73.               checked
  74.             /><label for="modou">魔豆</label>
  75.             <input
  76.               type="checkbox"
  77.               name="brand[]"
  78.               id="maizhuo"
  79.               value="麦卓"
  80.               checked
  81.             /><label for="maizhuo">麦卓</label>
  82.             <input
  83.               type="checkbox"
  84.               name="brand[]"
  85.               value="小熊"
  86.               id="xiaoxiong"
  87.             /><label for="xiaoxiong">小熊</label>
  88.             <input
  89.               type="checkbox"
  90.               name="brand[]"
  91.               value="美的"
  92.               id="meidi"
  93.               checked
  94.             /><label for="meidi">美的</label>
  95.           </div>
  96.         </section>
  97.         <section>
  98.           <label for="markte_price">市场价</label
  99.           ><input
  100.             type="number"
  101.             name="markte_price"
  102.             id="markte_price"
  103.             value="199.99"
  104.             step="0.01"
  105.           />
  106.         </section>
  107.         <section>
  108.           <label for="shop_price">销售价</label
  109.           ><input
  110.             type="number"
  111.             name="shop_price"
  112.             id="shop_price"
  113.             value="99.99"
  114.             step="0.01"
  115.           />
  116.         </section>
  117.         <section>
  118.           <label for="goods_weight">重量</label
  119.           ><input
  120.             type="number"
  121.             name="goods_weight"
  122.             id="goods_weight"
  123.             value="1"
  124.             step="0.01"
  125.           />
  126.         </section>
  127.         <section>
  128.           <label for="weight_unit">单位</label
  129.           ><input type="text" name="weight_unit" id="weight_unit" value="1" />
  130.         </section>
  131.       </fieldset>
  133.       <fieldset>
  134.         <legend>详情</legend>
  135.         <section>
  136.           <label for="pic">图片</label>
  137.           <input type="file" name="pic" id="pic" />
  138.         </section>
  139.         <section>
  140.           <label for="description">详情描述</label>
  141.           <textarea
  142.             name="description"
  143.             id="description"
  144.             cols="30"
  145.             rows="10"
  146.             minlength="50"
  147.             maxlength="50000"
  148.             placeholder="不超过50000字符,不低于50个字符"
  149.           ></textarea>
  150.         </section>
  151.       </fieldset>
  152.       <button type="submit">
  153.         提交
  154.       </button>
  155.     </form>
  156.   </body>
  157. </html>

2.表单截图

3.表单网址

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：没有总结, 下次注意
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post