常见form表单5种input输入类型 程序员文章站 2022-06-22 09:46:32 定义供用户输入的表单定义输入域定义文本域 (一个多行的输入控件)<label>定义了 <input> 元素的标签，一般为输入标题<fieldset>定义了一组相关的表单元素，并使用外框包含起来<legend>定义了 <fieldse... ......</div> <div class="content"> <p>html表单用于收集不同类型的用户输入，表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签<form>来设置</p> <div class="cnblogs_code"> <pre class="brush: css;">1 <form> 2 input elements 3 </form></pre> </div> <h2>html 表单 - 输入元素</h2> <p>多数情况下被用到的表单标签是输入标签（<input>），<input>>元素是最重要的表单元素。输入类型是由类型属性（type）定义的，大多数经常被用到的输入类型如下：</p> <ol> <li>文本域（text fields）</li> <li>密码字段</li> <li>单选按钮（radio buttons）</li> <li>复选框（checkboxes）</li> <li>提交按钮(submit button)</li> </ol> <h3>一、什么是文本域（text fields）？</h3> <p>文本域通过<input type="text" /> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。</p> <form> <p> first name: <input type="text" name="firstname"><br> last name: <input type="text" name="lastname"></p> <div class="cnblogs_code"> <pre class="brush: css;">1 <form> 2 first name: <input type="text" name="firstname"><br> 3 last name: <input type="text" name="lastname"> 4 </form> </pre> </div> </form> <h3>二、什么是密码字段？</h3> <p>密码字段通过标签<input type="password" /> 来定义，注意:密码字段字符不会明文显示，而是以星号或圆点替代。</p> <form>password: <input type="password" name="pwd"> </form> <div class="cnblogs_code"> <pre class="brush: css;">1 <form> 2 password: <input type="password" name="pwd"> 3 </form> </pre> </div> <h3>三、什么是单选按钮（radio buttons）？</h3> <p><input type="radio">标签定义了表单单选框选项</p> <form> <input type="radio" name="sex" value="male">male<br><input type="radio" name="sex" value="female">female </form> <div class="cnblogs_code"> <pre class="brush: css;">1 <form> 2 <input type="radio" name="sex" value="male">male<br> 3 <input type="radio" name="sex" value="female">female 4 </form> </pre> </div> <h3>四、什么是复选框（checkboxes）？</h3> <p><input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。</p> <form> <input type="checkbox" name="vehicle" value="bike">i have a bike<br><input type="checkbox" name="vehicle" value="car">i have a car </form> <div class="cnblogs_code"> <pre class="brush: css;">1 <form> 2 <input type="checkbox" name="vehicle" value="bike">i have a bike<br> 3 <input type="checkbox" name="vehicle" value="car">i have a car 4 </form> </pre> </div> <h3>五、什么是提交按钮(submit button)？</h3> <blockquote><input type="submit">>定义了提交按钮.当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理</blockquote> <form action="" method="get" name="input">username: <input type="text" name="user"><input type="submit" value="submit"> </form> <p><q> 注释:假如您在文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。 </q></p> <div class="cnblogs_code"> <pre class="brush: css;">1 <form name="input" action="html_form_action.php" method="get"> 2 username: <input type="text" name="user"> 3 <input type="submit" value="submit"> 4 </form> </pre> </div> <h4>关于html表单补充部分</h4> <dl style="margin-bottom: 15px;"> <dt><a href="https://www.cnblogs.com/dhnblog/p/12300620.html" target="_blank" rel="nofollow">a.html基本标签表单实现交互原理，单选框，复选框，下拉框介绍</a></dt> <dd>概括：表单是什么？表单是前端和服务器做交互的一种机制，表单收集用户输入信息，之后发送或者提交给服务器。用户在输入的信息称之为内容，内容的文本分为普通和密码型，用户通过单选框、复选框、下拉框（也就是下拉菜单）完成内容信息输入，最后通过提交按钮发送给服务器！这里要讲到浏览器怎么发送给服务器？涉及到http协议，也就是超文本传输协议，它是浏览器和服务器通讯的一种机制。模式为：请求——应答，浏览器发送请求=>服务器接收=>自身处理=>结果返回浏览器=>浏览器根据结果展示页面给用户，请求分为get和post；以及input单选框，复选框和select下拉框介绍</dd> </dl> <dl> <dt><a href="https://www.cnblogs.com/dhnblog/p/12387370.html" target="_blank" rel="nofollow">b.form实现浏览者登陆、注册页面与浏览器的交互</a></dt> <dd>概括：网站怎样与用户进行交互？答案是使用html表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。 <:form method="传送方式" action="服务器文件">1.<form>标签是成对出现的2.action ：浏览者输入的数据被传送到的地方,比如一个php页面(save.php);3.method ： 数据传送的方式（get/post）。注意事项:1>所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form<>/form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）2>method : post/get 的区别这一部分内容属于后端程序员考虑的问题。</dd> </dl> </div> <div class="info-pre-next"> <p> 上一篇： <a href="/article/1487978.html"> 京东技术官手撸这份“典藏级”Redis进阶手册，从入门到应用再到源码，一一兼备，不愧为“跳槽涨薪”首选 </a> </p> <p> 下一篇： <a href="/article/1487980.html"> 太平公主到底做了什么 李隆基登基后为什么要杀自己的姑姑 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/1898822.html" target="_blank" title="关于Form表单的Input输入对象"> <h2> 关于Form表单的Input输入对象 </h2> </a> </li> <li> <a href="/article/1538242.html" target="_blank" title="layui form表单 input输入框获取焦点后 阻止Enter回车自动提交"> <h2> layui form表单 input输入框获取焦点后 阻止Enter回车自动提交 </h2> </a> </li> <li> <a href="/article/1487979.html" target="_blank" title="常见form表单5种input输入类型"> <h2> 常见form表单5种input输入类型 </h2> </a> </li> <li> <a href="/article/1299556.html" target="_blank" title="【elementUI】关于el-input限制输入整数、数字范围以及在form表单验证中限制输入正整数"> <h2> 【elementUI】关于el-input限制输入整数、数字范围以及在form表单验证中限制输入正整数 </h2> </a> </li> <li> <a href="/article/1029528.html" target="_blank" title="关于Form表单的Input输入对象"> <h2> 关于Form表单的Input输入对象 </h2> </a> </li> <li> <a href="/article/454747.html" target="_blank" title="Form表单的重置按钮(type=“reset“)无法重置隐藏Input输入框的值"> <h2> Form表单的重置按钮(type=“reset“)无法重置隐藏Input输入框的值 </h2> </a> </li> <li> <a href="/article/327028.html" target="_blank" title="常见form表单5种input输入类型"> <h2> 常见form表单5种input输入类型 </h2> </a> </li> <li> <a href="/article/166502.html" target="_blank" title="layui form表单 input输入框获取焦点后 阻止Enter回车自动提交"> <h2> layui form表单 input输入框获取焦点后 阻止Enter回车自动提交 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>