html_表单form中的input类型大集合
学到后面发现前面的内容都不是很巩固了。
知道自己的不足之后,最近在复习一些学过的知识。
做了一个表单form的input的属性type的大部分功能,当然还有没有涉及到的,比如range,time,month,number等等等等
贴上代码
<div class="content"> <h2>商品信息</h2> <form method="post" class="goods_form"> <div class="goods_info"> <label for="goods_no" class="cap">商品编号:</label> <input type="text" name="goods_no" id="goods_no" class="txt" required placeholder="请输入商品编号"> </div> <div class="goods_info"> <label for="goods_name" class="cap">商品名称:</label> <input type="text" name="goods_name" id="goods_name" class="txt" placeholder="请输入商品名称" required> </div> <div class="goods_info"> <label for="goods_price" class="cap">商品单价:</label> <input type="text" name="goods_price" id="goods_price" class="txt" placeholder="请输入商品单价" required> </div> <div class="goods_info"> <label for="goods_photo" class="cap">商品图片:</label> <input type="file" name="goods_photo" id="goods_photo" class="photo" accept="image/gif,image/jpeg,image/png"> </div> <div class="goods_info"> <label for="goods_kind" class="cap">商品所属类别:</label> <select id="goods_kinds" class="txt"> <option value="0">=====请选择=====</option> <optgroup label="=====食品====="> <option value="零食">=====零食=====</option> <option value="水果">=====水果=====</option> <option value="饮品">=====饮品=====</option> </optgroup> <option value="家用电器">家用电器</option> <option value="日用品">日用品</option> <option value="服饰">服饰</option> </select> </div> <div class="goods_info"> <span class="cap">商品来源:</span> <label for="goods_self" class="lab">自产</label> <input type="radio" name="goods_from" id="goods_self" checked> <label for="goods_others" class="lab">代售</label> <input type="radio" name="goods_from" id="goods_others"> <label for="goods_factory" class="lab">厂家直销</label> <input type="radio" name="goods_from" id="goods_factory"> <label for="goods_my" class="lab">自营</label> <input type="radio" name="goods_from" id="goods_my"> </div> <div class="goods_info"> <span class="cap">商品存储条件:</span> <label for="cool" class="lab">冷藏</label> <input type="checkbox" name="goods_save" value="冷藏" id="cool" checked> <label for="fresh" class="lab">保鲜剂</label> <input type="checkbox" name="goods_save" value="fresh" > <label for="fresh2" class="lab">保鲜薄膜</label> <input type="checkbox" name="goods_save" value="保鲜薄膜" id="fresh2"> <label for="clean" class="lab">定期整理</label> <input type="checkbox" name="goods_save" value="定期整理" id="clean class="lab"" checked> </div> <div class="goods_info"> <span class="cap">商品状态:</span> <label for="goods_onsale" class="lab">上架:</label> <input type="radio" name="goods_state" id="goods_onsale" checked> <label for="goods_outsale" class="lab">未上架:</label> <input type="radio" name="goods_state" id="goods_outsale"> </div> <input type="submit" name="sub" value="提 交" id="sub" class="sub"> </form> </div>
css:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style type="text/css"> *{ padding: 0; margin:0; } .content{ width:800px; margin:100px auto; border:2px solid pink; } .content>h2{ margin-top: 20px; text-align: center; color: #4682B4; } .goods_form{ margin-left: 250px; } .goods_info{ margin:20px 0; } .cap{ font-size:18x; color: #9F79EE; font-weight: bold; } .txt{ height:28px; width: 200px; font-size:16px; border-radius: 10px; box-shadow: none; outline: none; background: #F8F8FF; color: #8968CD; border: 1px solid #F8F8FF; text-align: center; } .photo{ font-size:16px; color: #8470FF; } .sub{ height: 40px; width: 140px; font-size:20px; font-weight: bold; margin: 20px 100px; border-radius: 10px; border:0; background: #436EEE; color: #fff; outline: none; opacity: 0.8; } .sub:hover{ opacity: 1; } </style>
效果展示
(PS:关于单选按钮/复选框的自定义样式,可以看我这篇文章:http://www.cnblogs.com/adelina-blog/p/5486628.html)
商品信息
以上内容,如有错误请指出,不甚感激。