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="提&nbsp;&nbsp;交" id="sub" class="sub">
        </form>    
    </div>

css:

    <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）

商品信息

商品编号:

商品名称:

商品单价:

商品图片:

商品所属类别: =====请选择===== =====零食===== =====水果===== =====饮品===== 家用电器 日用品 服饰

商品来源: 自产 代售 厂家直销 自营

商品存储条件: 冷藏 保鲜剂 保鲜薄膜 定期整理

商品状态: 上架: 未上架:

以上内容，如有错误请指出，不甚感激。