常见form表单5种input输入类型

HTML表单用于收集不同类型的用户输入，表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使用表单标签<form>来设置

1 <form>
2 input elements
3 </form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（<input>），<input>元素是最重要的表单元素。输入类型是由类型属性（type）定义的，大多数经常被用到的输入类型如下：

1. 文本域（Text Fields）
2. 密码字段
3. 单选按钮（Radio Buttons）
4. 复选框（Checkboxes）
5. 提交按钮(Submit Button)

一、什么是文本域（Text Fields）？

文本域通过<input type="text" /> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。注意:表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

1 <form>
2 First name: <input type="text" name="firstname"><br>
3 Last name: <input type="text" name="lastname">
4 </form> 

二、什么是密码字段？

密码字段通过标签<input type="password" /> 来定义，注意:密码字段字符不会明文显示，而是以星号或圆点替代。

1 <form>
2 Password: <input type="password" name="pwd">
3 </form> 

三、什么是单选按钮（Radio Buttons）？

<input type="radio">标签定义了表单单选框选项

1 <form>
2 <input type="radio" name="sex" value="male">Male<br>
3 <input type="radio" name="sex" value="female">Female
4 </form> 

四、什么是复选框（Checkboxes）？

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

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> 

五、什么是提交按钮(Submit Button)？

<input type="submit">>定义了提交按钮.当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

注释:假如您在文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。

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> 

关于html表单补充部分

A.html基本标签表单实现交互原理，单选框，复选框，下拉框介绍

概括：表单是什么？表单是前端和服务器做交互的一种机制，表单收集用户输入信息，之后发送或者提交给服务器。用户在输入的信息称之为内容，内容的文本分为普通和密码型，用户通过单选框、复选框、下拉框（也就是下拉菜单）完成内容信息输入，最后通过提交按钮发送给服务器！这里要讲到浏览器怎么发送给服务器？涉及到http协议，也就是超文本传输协议，它是浏览器和服务器通讯的一种机制。模式为：请求——应答，浏览器发送请求=>服务器接收=>自身处理=>结果返回浏览器=>浏览器根据结果展示页面给用户，请求分为GET和POST；以及input单选框，复选框和select下拉框介绍

B.form实现浏览者登陆、注册页面与浏览器的交互

概括：网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。 &lt:form method="传送方式" action="服务器文件">1.<form>标签是成对出现的2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php);3.method ： 数据传送的方式（get/post）。注意事项:1>所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form<>/form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）2>method : post/get 的区别这一部分内容属于后端程序员考虑的问题。

原文链接:https://www.cnblogs.com/dhnblog/p/12591720.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有