表单元素

80 阅读 0 评论 53 点赞

我是靠谱客的博主和谐狗，最近开发中收集的这篇文章主要介绍表单元素，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

语法：
```
<form></form>
```
作用：

定义 HTML 表单域，是一个包含表单元素的区域。实现用户信息的收集和传递。举例说明：比如最为常见的交互操作，注册会员、跟帖留言或者文章发布等
注意：

form表单实现上述操作是最为常见方式之一，也可以使用其他方式，比如ajax等

一个页面中可以包含多个form标签，标签之间是相互独立的，不能嵌套

1-1 form的属性

1-1-1 action属性

action="数据提交地址"
注意：如果省略 action 属性，则 action 会被设置为当前页面。

作用：

把数据提交到后台或者服务器
注意：

如果省略 action 属性，则 action 会被设置为当前页面。

1-1-2 target属性

作用：

设置目标地址的打开方式
取值：
- _self当前窗口(默认值)
- _blank新窗口

1-1-3 method属性

作用：

method="GET/POST":提交表单时所用的HTTP方法，默认是GET方法
取值：
- GET/POST
  get 方法：将表单中数据的按照 variable=value 的形式，添加到 action 所指向的【 URL 后面，并且两者使用“?”连接】，而各个变量之间使用“&”连接。（通过地址栏提交）
```
https://www.baidu.com/?user=11&pass=22
https://www.baidu.com/?参数1=值1&参数2=值2  
```
  post方法：将表单中的【数据放在 form 的数据体】中，按照变量和值相对应的方式，传递到 action 所指向 URL。将数据隐藏在http数据流中传输（通过后台提交）
注意：name属性：如果input表单不设置name属性，输入框的内容无法随表单一起提交

2、input表单控件

表单元素是允许用户在表单中输入内容的标签，比如：文本域、下拉列表、单选框、复选框等。

概述：<input>标签是最重要的表单元素。type属性取值不同，可以展示出不同的表单形式。
作用：用来定义不同种类的输入控件

语法：

语法：<input type="text" name="" value="">
type属性:表示不同类型的表单控件
name属性：表单的字段名，如果不设置name属性，输入框的内容无法随表单一起提交
value属性：规定输入字段的初始值

常用类型
- type="text"
  - 作用：用于文本输入的单行输入字段
```
   <input type="text"  placeholder="请输入账号">
 
type='text'
 
placeholder：提示信息
```
- type="password"
  - 作用：定义密码字段
  - 默认掩码处理
```
<input type="password" value="密码">
```
- type="radio"
  - 作用：定义单选按钮，允许用户在有限数量的选项中选择其中之一（需要指定单选按钮组）
```
<input type="radio">
<input type="radio" name="" value="">
name属性：可以实现单选框的互斥效果，name设置的属性值要一样，即选男不能选女，选女不能选男
value属性：必不可少的，表示选项代表的值
```
- type="checkbox"
  - 作用：定义复选框，允许用户在有限数量的选项中选择零个或多个选项
```
<input type="checkbox">
<input type="checkbox" name="" value="">
name属性：name设置的属性值要一样，实现多个选项保存在同一个字段中
value属性：必不可少的，表示选项代表的值
checked:用于单选框按钮和复选框按钮的默认选中,直接在input标签写checked或checked='checked'
```
- type="submit"
  - 作用：定义用于向表单处理程序提交表单的按钮
  - 注意：省略了提交按钮的 value 属性，该按钮将显示默认文本”提交”（不同浏览器表现不同）
```
 <input type="submit" value="提交按钮">
```
- type="button"
  - 作用：定义普通按钮
```
<input type="button" value="按钮">
```
  - 提示：不能提交信息，默认没有文字
  - value属性：定义普通按钮的文字
- type="reset"
  - 作用：清除表单控件的输入信息
```
 <input type="reset" value="重置">
```
  - value属性：修改按钮的文字，默认是重置
- 扩展：
```
按钮button
 <button type="submit"></button>
默认没有文字，内容写在中间
具有提交功能，但是在ie7及以下浏览器是没用提交功能的
             
type类型默认submit
```
- type="image"
- 作用：定义图像形式的提交按钮
- 属性
  - src=""：指定图片地址
  - alt=""：指定替换文本
  - 提示：src 属性和alt 属性必须与 <input type="image"> 结合使用，一般不建议使用
  - width:设置宽height：设置高
```
  <input type="image" src="./images/4.jpg" alt="图片" width="100" height="200">
```
- type="file"
- 作用：用于文件上传
  - 注意：要实现文件的上传，必须在form标签中添加enctype="multipart/form-data"
```
<input type="file">
```

2-1 textarea标签

作用：

用于留言板等需要输入大量文本的一个标签
语法：
```
<textarea>初始值</texarea>
```

注意：不能够使用value属性规定它的初始值，初始值在开始和结束标签之间设置

 <textarea name="" id="" cols="30" rows="10">我是一个文本框</textarea>
resize: none禁止用户手动调整多行文本域的大小
         cols属性是表示宽度
         rows属性是表示行数

2-3 select标签

概述：

select标签用于定义下拉列表，下拉列表种通过option标签定义选项

语法：

下拉列表
       <select name=""size="2">        
           <option value="北京">北京</option>
           <option value="上海">上海</option>
           <option value="天津">天津</option>
       </select>
     
option:列表项
     
value属性：必不可少的，表示选项代表的值
     
selected:下拉列表的默认选中，直接在option标签中写即可，selected或者selected='selected'
     
size属性：控件长度,规定下拉列表中可见选项的数目

3、表单元素标注

为 input 元素定义标注（标记）通过<label> 标签的 for 属性值与相关元素的 id 值相同，绑定表单元素

作用：是扩大点击范围，提高用户体验

一般与单选按钮或者复选框组合使用

语法：
```
<label for="id名"></label>
```

效果描述：

当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

<input type="radio" id="man1" name="man" value="男">
   <label for="man1">男</label>

   <input type="checkbox" name="" id="woman" value="女">
   <label for="woman">女</label>

  <label for="man">
      <input type="radio" name="sex" value="男" checked id="man">男
    </label>

3.表单属性

       1、action 属性定义在提交表单时执行的动作。通常，表单会被提交到 web 服务器上的网页。如果省略 action 属性，则 action 会被设置为当前页面。
      2、method="GET/POST":提交表单时所用的HTTP方法，默认是GET方法
      3、checked:用于单选框按钮和复选框按钮的默认选中,直接在input标签写checked或checked='checked'
      4、selected:下拉列表的默认选中，直接在option标签中写即可，selected或者selected='selected'        
5、value属性：规定输入字段的初始值。
      6、readonly属性:只读属性,只能读，不能修改
      7、disabled属性:禁用属性，表示元素不可用，不可以点击
      8、maxlength属性：允许输入的最多字符
      9、size属性：控件长度,规定下拉列表中可见选项的数目
      10、placeholder 提示用户输入信息

2、文本框和按钮不对齐现象

input 设置左浮动 (float:left)
因为按钮的高度比input的高度大2px
垂直对齐：按钮设置高度比文本框的高度大2px

左右对齐:文本框和按钮设置浮动

 input {
   
/* 左右对齐 */
   
float: left;
 
}
 
.sub {
   
/* 垂直对齐 */
   
/* 按钮的高度比文本框的高度大2px */
   
height: 21px;
 
}

-------------------------------------------------------------------------------
input {
   
/* 左右对齐 */
   
float: left;

   
height: 50px;
 
}

 
.sub {
   
/* 垂直对齐 */
 
/* 文本框和按钮的高度要一样 */
   
height: 56px;
   
 
}
结构：

<input type="text" placeholder="text">
 <input type="submit" class="sub">
 <input type="button" class="sub" value="普通按钮">
 <input type="reset" class="sub">