简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >作业-html基础-表单制作

作业-html基础-表单制作

@大城
@大城原创
2020年04月05日 16:04:48666浏览

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.表单网址

上一条：HTML5表单知识点和实例下一条：演示链接、列表、表格、表单元素 2
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多