学到后面发现前面的内容都不是很巩固了。
知道自己的不足之后，最近在复习一些学过的知识。
做了一个表单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:
<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）
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;
}
-->
商品信息
商品编号:
商品名称:
商品单价:
商品图片:
商品所属类别:
=====请选择=====
=====零食=====
=====水果=====
=====饮品=====
家用电器
日用品
服饰
商品来源: 自产 代售 厂家直销 自营
商品存储条件: 冷藏 保鲜剂 保鲜薄膜 定期整理
商品状态: 上架: 未上架:
以上内容，如有错误请指出，不甚感激。