10-表单元素详解

							**10-表单元素详解**

1、什么是表单

网页注册登录界面、信息调查问卷、搜索引擎的输出框

2、常用表单元素

form元素（划分存储标签元素的块元素

form标签：
浏览器在网页上专门用来划分出一个用来存储表单元素的区域
form是块元素
form标签的action属性内部是一个连接，指向的是提交表单时向哪个服务器地址发送表单数据。
form标签的method属性内部存储着，该表单向目标服务器传输数据时采用的是哪种方式

 <form action="" method="GET"></form> 
 action：提交的url地址  method= get/post 
 get提交的内容会显示在地址栏上 不安全、存储量小
 post 安全
   <!-- 创建供用户输入的HTML表单，表单能够包含比如文本字段、复选框、单选框、提交按钮等等。
    并可以将数据提交至服务器 -->

input元素（最重要的表单元素！！！）

input元素：在 元素中使用，用来展示用户可以输入数据的元素。input标签最终的表现形式和传输至服务器的数据类型，取决于 type 属性。
input是行内块元素
input标签的type属性内部是存储着该input元素输入信息的类别（如，文字，单选，邮箱，电话号码，多选框等）
form标签的name属性内部存储着该input元素的名称，此处的名称与class不同

input元素（文字输入）

文字信息输入：type=“text”，（文本框）
此时input的展示形状为一个输入框
用户输入的信息会在框内显示出来

占位符：placeholder=“请输入用户名”
占位符的作用是在用户尚未输入信息时，在输入框中显示提示信息，该信息在用户点击
输入框并输入任意信息后会自动消失

文本输入的其他种类：
type=“email”, 输入邮箱地址

input元素（密码输入）

密码信息输入：type=“password”
此时input的展示形状为一个输入框
用户输入的信息会被加密，不会显示原始文字信息

占位符：placeholder=“请输入密码”（）
占位符的作用是在用户尚未输入信息时，在输入框中显示提示信息，该信息在用户点击
输入框并输入任意信息后会自动消失

 用户名：<input type="text" placeholder="请输入姓名" title="用户姓名">
   <br>密码&emsp;:<input type="password" value="12345" placeholder=“请输入密码”>
   <br>性别： 女<input type="radio" name="sex" value="1">
   <br>男<input type="radio" name="sex" value="2">
<!-- type="text"  password value 初始值所有的内容在后面填充  -->
   <!-- 提示值 input type="text" placeholder 提示内容直接写在后面 -->

input元素（数字输入

数字信息输入：type=“number”
此时input的展示形状为一个输入框,当鼠标悬浮在元素上时，此处会显示一个上下调整的按钮，可用来选择具体数字

购买数量: <input type =“number” name =”pr oduc tnum" P laceholder =”请输入购买个数">

选择文件  <input type="file" name="333">

input元素（多文件输入）

多文件信息输入：type=“file” multiple

给input type为file的元素加一个multiple
属性，那么此时用户可在弹出来的资源管理器中选择多个文件, 选中多个文件后，提示文件会提示用户当前选中了多少个文件

选择文件  <input type="file" name="999" multiple>

input元素（模拟按钮

模拟按钮：type=“button” value=“按钮中显示的文字”

当type为button时，此时input元素显示为一个按钮， 按钮中的文字由元素标签内部value属性中的文字决定

模拟按钮：type=“submit” value=“按钮中显示的文字”

当type为submit时，此时input元素显示为一个按钮， 按钮中的文字由元素标签内部value属性中的文字决定，点击此按钮就会向服务器提交整个表单的所有数据

input元素（模拟单选、多选按钮）

模拟单选按钮：type=“radio” name=“表单元素的名称” value=“该按钮选项给服务器传输的数据值”

当type为radio时，此时input元素显示为一个圆按钮或是方按钮， 点中按钮后，该按钮会变色，多个name值相同的按钮，只可以选择一个

模拟多选按钮：type=“checkbox” name=“表单元素的名称” value=“该按钮选项给服务器传输的数据值”

当type为checkbox时，此时input元素显示为一个圆按钮或是方按钮， 点中按钮后，该按钮会变色，多个name值相同的按钮，每个都可以选择

label元素（扩大按钮的选中区域）

label元素：扩大用户选中input元素的区域，for属性的存储的对应input元素的id名称

button元素（专职按钮元素）

如果在 HTML 表单中使用 元素，不同的浏览器可能会提交不同的按钮值。请使用 在 HTML 表单中创建按钮。

下拉选项

select元素：创造一个下拉选项列表，select中的name值表示这个下拉选项列表的名称
option元素：创造一个下拉选项列表中的具体选项，option中的value值表示用户选择这个选项后，表单向服务器发送的数据

option元素中如果有一个selected的单词，这表示，该选项为此下拉选项列表的默认选择

表单分组

标签可以将表单内的相关元素分组，会在相关表单元素周围绘制边框。 标签为 元素定义标题。