form表单（HTML标签）

定义：

标签代表一个表单，表单用于向服务器传输数据。包含,可以是文本字段，按钮，单选框，复选框，提交按钮等，还可以包含<select>等。</p> <p><strong>form表单常用属性：</strong></p> <p>               name：用于定义表单的名称</p> <p>               action：用于规定表单提交将数据发送给谁</p> <p>               method：提交数据的方式，一般为post请求或get请求</p> <p><strong>格式：</strong></p> <p>     </p> <pre class="has"><code class="language-html"> <form name="login" action="" method="get"> </form></code></pre> <p>   </p> <p><strong>form表单中的子标签：</strong></p> <p>                <strong> input种类：</strong></p> <p><strong>                         </strong> <strong>text：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/e89107b80ce44e8796effcfcd495860a.png" target="_blank"><img alt="" class="has" height="88" src="http://img.e-com-net.com/image/info8/e89107b80ce44e8796effcfcd495860a.png" width="360"></a></p> <pre class="has"><code class="language-html"> <form name="" action="" method=""> text<br> <!--placeholder占位--> 用户名：<input type="text" placeholder="请输入中文用户名"> <hr> </form></code></pre> <p><strong>password：</strong></p> <p>             输入内容不可见，一般用于密码框。</p> <p><a href="http://img.e-com-net.com/image/info8/dc6b33682c564a7ca776e4a157eabc05.jpg" target="_blank"><img alt="form表单（HTML标签）_第1张图片" class="has" height="123" src="http://img.e-com-net.com/image/info8/dc6b33682c564a7ca776e4a157eabc05.jpg" width="363" style="border:1px solid black;"></a></p> <pre class="has"><code class="language-html"> <form name="" action="" method=""> password<br> 密码：<input type="password"> <hr> </form></code></pre> <p><strong>radio：</strong></p> <p>      单选，实现单选必须设置相同的名字。</p> <p><a href="http://img.e-com-net.com/image/info8/5732a2aecb374a0d8e8782f7aca9fe22.jpg" target="_blank"><img alt="" class="has" height="80" src="http://img.e-com-net.com/image/info8/5732a2aecb374a0d8e8782f7aca9fe22.jpg" width="312"></a></p> <pre class="has"><code class="language-html"><form name="" action="" method=""> radio<br> 是否记住密码：<input type="radio" name="nsp">是 <input type="radio" name="nsp">否 <hr> </form></code></pre> <p><strong>checkbox：</strong></p> <p><strong>    </strong>多选。</p> <p><a href="http://img.e-com-net.com/image/info8/60cdbed171c84cc09b84e4affb008552.jpg" target="_blank"><img alt="" class="has" height="94" src="http://img.e-com-net.com/image/info8/60cdbed171c84cc09b84e4affb008552.jpg" width="369"></a></p> <pre class="has"><code class="language-html"> <form name="" action="" method=""> checkbox<br> 选择喜爱的事物：<input type="checkbox" name="">唱 <input type="checkbox" name="">跳 <input type="checkbox" name="">rap <input type="checkbox" name="">篮球 <hr> </form></code></pre> <p><strong>button:</strong></p> <p>按钮。</p> <p><a href="http://img.e-com-net.com/image/info8/271eb5dbb7c544a694e2ffb930378220.jpg" target="_blank"><img alt="" class="has" height="99" src="http://img.e-com-net.com/image/info8/271eb5dbb7c544a694e2ffb930378220.jpg" width="450"></a></p> <pre class="has"><code class="language-html"> <form name="" action="" method=""> button<br> 按钮：<input type="button" value="点我啊！"> <hr> </form></code></pre> <p><strong>hidden：</strong></p> <p>用于提交表单，在页面上不显示，在源码中显示。</p> <p><a href="http://img.e-com-net.com/image/info8/8f8ab1c1bf6a40dfa72a5149c28cb0a1.jpg" target="_blank"><img alt="" class="has" height="93" src="http://img.e-com-net.com/image/info8/8f8ab1c1bf6a40dfa72a5149c28cb0a1.jpg" width="434"></a></p> <pre class="has"><code class="language-html"> <form name="" action="" method=""> hidden<br> 隐藏类型：<input type="hidden" value="123456"> <hr> </form></code></pre> <p><strong>file：</strong></p> <p>用于提交文件，或者选择文件。点击时会弹出文件选择框。</p> <p> <a href="http://img.e-com-net.com/image/info8/e7afa5d364624d98aebd58fb30ab5a9d.jpg" target="_blank"><img alt="" class="has" height="74" src="http://img.e-com-net.com/image/info8/e7afa5d364624d98aebd58fb30ab5a9d.jpg" width="379"></a></p> <pre class="has"><code class="language-html"> <form name="" action="" method=""> file<br> <input type="file" value="提交文件"> <hr> </form></code></pre> <p><strong>submit:</strong></p> <p>一般用于登录页面向后台提交登录信息。点击时会像后台发送登录信息。只会提交位于form表单内的信息。</p> <p><a href="http://img.e-com-net.com/image/info8/871ce496a0b54e90b1a45a3d02c84a28.jpg" target="_blank"><img alt="" class="has" height="60" src="http://img.e-com-net.com/image/info8/871ce496a0b54e90b1a45a3d02c84a28.jpg" width="442"></a></p> <pre class="has"><code class="language-html"> <form name="" action="" method=""> text<br> <!--placeholder占位--> 用户名：<input type="text" placeholder="请输入中文用户名"> <hr> password<br> 密码：<input type="password"> <hr> submit<br> 提交按钮：<input type="submit" value="提交"> <hr> </form></code></pre> <p><strong>reset:</strong></p> <p>重置位于form表单内的信息。</p> <p><a href="http://img.e-com-net.com/image/info8/f69b8c3e14c643888a0aa387f9193467.jpg" target="_blank"><img alt="" class="has" height="95" src="http://img.e-com-net.com/image/info8/f69b8c3e14c643888a0aa387f9193467.jpg" width="352"></a></p> <pre class="has"><code class="language-html"> <form name="" action="" method=""> 重置：<input type="reset" value="重置"> <hr> </form></code></pre> <p><strong>image：</strong></p> <p>图片类型，相当于图片按钮。</p> <p><a href="http://img.e-com-net.com/image/info8/ba68808d908e4be6ab2cda5db546b5f7.jpg" target="_blank"><img alt="form表单（HTML标签）_第2张图片" class="has" height="305" src="http://img.e-com-net.com/image/info8/ba68808d908e4be6ab2cda5db546b5f7.jpg" width="650" style="border:1px solid black;"></a></p> <pre class="has"><code class="language-html"> <form name="" action="" method=""> image<br> <input type="image" src="C:\Users\sd-acm\Desktop\sign.jpg"> <hr> </form></code></pre> <p><strong>select：</strong></p> <p>下拉框。</p> <p><a href="http://img.e-com-net.com/image/info8/4c11f9f2933344808b2a650d58dd4e74.jpg" target="_blank"><img alt="form表单（HTML标签）_第3张图片" class="has" height="124" src="http://img.e-com-net.com/image/info8/4c11f9f2933344808b2a650d58dd4e74.jpg" width="211" style="border:1px solid black;"></a></p> <pre class="has"><code class="language-html"> <form name="" action="" method=""> select<br> <select> <option>上海</option> <option>广州</option> <option>深圳</option> <option>河南</option> </select> <hr> </form></code></pre> <p><a href="http://img.e-com-net.com/image/info8/dc768cd10d254f0fac2e485a8ada7ee0.jpg" target="_blank"><img alt="form表单（HTML标签）_第4张图片" class="has" height="124" src="http://img.e-com-net.com/image/info8/dc768cd10d254f0fac2e485a8ada7ee0.jpg" width="176" style="border:1px solid black;"></a></p> <pre class="has"><code class="language-html"> <form name="" action="" method=""> select<br> <!--multiple多选--> <select multiple="multiple"> <option>上海</option> <option>广州</option> <option>深圳</option> <option>河南</option> </select> <hr> </form></code></pre> <p><strong>textarea：</strong></p> <p>文本标签。</p> <p><a href="http://img.e-com-net.com/image/info8/ea447bc2d7214c7e86b0ab116d9425af.jpg" target="_blank"><img alt="form表单（HTML标签）_第5张图片" class="has" height="117" src="http://img.e-com-net.com/image/info8/ea447bc2d7214c7e86b0ab116d9425af.jpg" width="343" style="border:1px solid black;"></a></p> <pre class="has"><code class="language-html"> <form name="" action="" method=""> textarea<br> <textarea width="10" height="40">

---