表单 由表单元素组成。常用的表单元素有以下几种标记：输入域标记 、选择域标记 和、文字域标记等。</span><br></p> <p>这一章节我们重点来介绍一下输入域标记 <input>。</p> <p><span style="font-size: 16px;"><strong>输入域标记 <input></strong></span></p> <p>输入域标记 <input> 是表单中最常用的标记之一。常用的输入域标记 <input> 有文本框、<a href="//m.sbmmt.com/code/5991.html" target="_blank">按钮</a>、<a href="//m.sbmmt.com/code/5979.html" target="_blank">单选按钮</a>、<a href="//m.sbmmt.com/code/5981.html" target="_blank">复选框</a>等等。</p> <p>其语法格式如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><form> <input name="file_name" type="type_name"> </form></pre><div class="contentsignin">登录后复制</div></div><p>参数 name是指输入域的名称；参数 type 是指输入域的类型。在 <input....type="">标记中提供了如下的几个种类型的输入域，用户可以根据自己的需求用 type<a href="//m.sbmmt.com/wiki/169.html" target="_blank">属性</a>决定选择使用类型。</p><p><strong><br/></strong></p><p><strong>type属性取值及举例及说明：</strong></p><p><strong>1. text</strong> </p><p>实例:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><input name="user" type="text" value="饮料" size="12" maxlength="1000" ></pre><div class="contentsignin">登录后复制</div></div><p>说明： name 为文本框的名称， value 是文本框的默认值，size 指文本框的宽度（以字符为单位）， maxlength 指文本框的最大输入字符数。</p><p><img src="https://img.php.cn//upload/image/309/291/112/1492310725355563.png" title="1492310725355563.png" alt="11.png"/></p><p><strong>2. password</strong></p><p>实例：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><input name="pwd" type="password" value="123456" size="8" maxlength="16" ></pre><div class="contentsignin">登录后复制</div></div><p>说明：密码域，用户在该文本框中输入字符将被替换显示为 “ * ” ，以起到保密的作用。</p><p><img src="https://img.php.cn//upload/image/907/609/484/1492310759382790.png" title="1492310759382790.png" alt="12.png"/></p><p><strong>3. file</strong> </p><p>实例：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><input name="file" type="file" enctype="multipart/form-date" size="12" maxlength="200" ></pre><div class="contentsignin">登录后复制</div></div><p>说明：文件域，当<a href="//m.sbmmt.com/code/112.html" target="_blank">文件上传</a>时，可以用来打开一个模式窗口以选择文件。然后将文件通过表单上传到服务器，如上传 word 文件等。必须注意的是，上传文件时需要指明表单的属性 <strong>enctype="multipart/form-date"</strong>才可以实现上传功能。</p><p><img src="https://img.php.cn//upload/image/579/907/935/1492310801385908.png" title="1492310801385908.png" alt="13.png"/></p><p><strong>4. radio</strong></p><p>实例：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><input name="sex" type="radio" value="男" checked>男 <input name="sex" type="radio" value="女" >女</pre><div class="contentsignin">登录后复制</div></div><p>说明：单选按钮，用于设置一组选择项，用户只能选择一项，checked 属性用来设置该单选按钮默认被选中。</p><p><img src="https://img.php.cn//upload/image/399/452/192/1492310881303885.png" title="1492310881303885.png" alt="14.png"/></p><p><strong>5. checkbox</strong></p><p>实例：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><input name="goods" type="checkbox" value="book" checked="checked" >图书 <input name="goods" type="checkbox" value="fruits" >水果 <input name="goods" type="checkbox" value="food" >食品</pre><div class="contentsignin">登录后复制</div></div><p>说明：复选框，允许用户选择多个选择项。checked 属性用来设置该单复选框默认被选中。例如，收集个人信息时，要求在个人爱好的选项中进行<a href="//m.sbmmt.com/code/7271.html" target="_blank">多项选择</a>等。</p><p><img src="https://img.php.cn//upload/image/418/657/865/1492310912765352.png" title="1492310912765352.png" alt="15.png"/></p><p><strong>6. submit</strong> </p><p>实例：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><input name="submit" type="submit" value="提交" ></pre><div class="contentsignin">登录后复制</div></div><p>说明：将表单内的内容提交到服务器。</p><p><img src="https://img.php.cn//upload/image/728/955/835/1492311017702670.png" title="1492311017702670.png" alt="16.png"/></p><p><strong>7. reset</strong></p><p>实例：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><input name="reset" type="reset" value="重置"></pre><div class="contentsignin">登录后复制</div></div><p>说明： 清除与重置表单内容，用于清除表单中所有文本框的内容，并使选择菜单项恢复到初始值。</p><p><img src="https://img.php.cn//upload/image/418/757/654/1492311040596676.png" title="1492311040596676.png" alt="17.png"/></p><p><strong>8. button</strong> </p><p>实例：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><input type="button" value="Hello world!"></pre><div class="contentsignin">登录后复制</div></div><p>说明：按钮可以激发提交表单的动作。可以在用户需要修改表单时，将表单恢复到初始的状态，还可以依照程序的需要发挥其他作用。普通按钮一般是配合<a href="//m.sbmmt.com/wiki/48.html" target="_blank">JavaScript</a> 脚本进行表单处理。</p><p><img src="https://img.php.cn//upload/image/835/124/727/1492311072434519.png" title="1492311072434519.png" alt="18.png"/></p><p><strong>9.hidden</strong></p><p>实例如下所示：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><input type="hidden" name="id"></pre><div class="contentsignin">登录后复制</div></div><p>说明：隐藏域，用于在表单中以隐含方式提交<a href="//m.sbmmt.com/wiki/70.html" target="_blank">变量</a>值。隐藏域在页面中对于用户是不可见的，添加隐藏域的目的在于通过隐藏的方式收集或者发送信息。浏览者单击“发送”按钮发送表单时，隐藏域的信息也被一起发送到action指定的处理页。</p> <p>以上就是输入域标记 <input>的介绍和<input>的 type属性的举例讲解说明，朋友们需要对此进行记忆和多多操作练习，因为在以后的开发中表单会非常的有用。</p>
