HTML中的表单from
HTML 表单
表单是一个包含表单元素的区域。
表单通常用于让用户能够进行输入操作使用的,例如常见的登录、搜索、注册、图片上传等等。
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单中的基础标签
表单是让用户进行信息输入的,将输入的数据提交到服务器上,服务器再根据提交的数据进行分析验证反馈结果。
-
action:指定服务器地址。
-
method:指定表单数据的提交方式。
get:默认的提交方式,get方式提交的数据会在地址栏中显示出来,很不安全,所能提交的数据量比较小,效率高。 post:效率低,安全,携带大量的数据,不会在地址栏中显示。
标签 | 描述 |
---|---|
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label> | 定义了 元素的标签,一般为输入标题 |
<fieldset> | 定义了一组相关的表单元素,并使用外框包含起来 |
<legend> | 定义了 元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
<datalist> | 指定一个预先定义的输入控件选项列表 |
<keygen> | 定义了表单的密钥对生成器字段 |
<output> | 定义一个计算结果 |
注意:表单中的数据想要提交,一定要有name属性存在。
表单中所有的内容都是通过以下三个标签组成的:
input、textarea、select
HTML 表单类型input
多数情况下被用到的表单标签是输入标签(<input>)。
输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
类型 | 说明 |
---|---|
button | 按钮类型,与<button>标签一致 |
checkbox | 复选按钮 |
date | 选着日期表单 |
number | 表单只能输入数字数字 |
password | 密码表单,自动隐藏内容 |
text | 文本输入框 |
radio | 单选按钮 |
file | 文件上传按钮 |
submit | 表单提交按钮 |
reset | 重置 |
文本域(Text Fields)
文本域通过 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
- List item
密码字段(PassWord)
密码字段通过标签<input type=“password”> 来定义:
<form>
Password: <input type="password" name="pwd">
</form>
浏览器显示效果如下:
Password:
注意:密码字段字符不会明文显示,而是以星号或圆点替代。
单选按钮(Radio Buttons)
<input type=“radio”> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
浏览器显示效果如下:
Male
Female
复选框(Checkboxes)
<input type=“checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<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>
浏览器显示效果如下:
I have a bike
I have a car
提交按钮(Submit Button)
<input type=“submit”> 定义了提交按钮.
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>