HTML基础笔记——表单

如果想要做出一个动态页面，我们就需要借助表单来实现

在HTML中，表单标签有五种：form、input、textarea、select、option

根据外观进行划分，表单可以分为以下八种：单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多行文本框、下拉列表

---

创建一个表单，与创建一个表格类似，我们也必须要把所有表单标签放在form标签内部

<form>
    各种表单标签
</form>

form标签属性

属性	说明
name	表单名称
method	提交方式
action	提交地址
target	打开方式
enctype	编码方式

1.name属性

在一个页面中，表单可能不止一个，每一个form标签就是一个表单。为了区分这些表单，我们使用name属性来给表单命名

<form name="myForm"></form>

2.method属性

在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个：一个是"get"，另外一个是"post"

get的安全性较差，而post的安全性较好，所以实际开发中，大多数情况我们都是使用post

<form method="post"></form>

3.action属性

在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理

<form action="index.php"></form>

4.target属性

form标签的target属性与a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下我们只会用到_blank这个属性值

<form target="_blank"></form>

5.enctype属性

在form标签中，enctype属性用于指定表单数据的提交的编码方式。一般情况下我们不需要设置，除非你用到上传文件功能

---

input标签

input标签是自闭合标签，它是没有结束符号的，其中常见type属性取值有

<input type="表单类型"/>

 单行文本框常用属性

 <form method="POST">
            姓名：<input type="text" value="kkklll"/>
 </form>

 密码文本框属性与单行文本框一样的属性

---

单选框

单选框的属性取值为radio

<input type="radio" name="组名" value="取值"/>

name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置

  <form method="POST">
            性别
            <input type="radio" name="gender" value="男"/>男
            <input type="radio" name="gender" value="女"/>女
  </form>

如果想要在默认情况下，让第一个单选框选中，我们可以用checked属性实现

  <form method="POST">
            性别
            <input type="radio" name="gender" value="男" checked />男
            <input type="radio" name="gender" value="女"/>女
  </form>

在实际开发中，对于同一组的单选框，必须设置一个相同的name，这样才会把这些选项归为同一个组

为了更好地语义化，表单元素与后面的文本一般都需要借助label标签关联起来

  <form method="POST">
            性别
            <input type="radio" name="gender" value="男"/>男</label>
            <input type="radio" name="gender" value="女"/>女</label>
  </form>

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

对于value属性，是为了方便Javascript或者服务器操作数据，实际上，所有表单元素的value属性的作用都是一样的

---

复选框

在HTML中，复选框也是使用input标签来实现的，其中type属性取值为checkbox

<input type="checkbox" name="组名" value="取值"/>

其用法与单选框大同小异

---

按钮

在HTML中，常见的按钮有三种：普通按钮button，提交按钮submit，重置按钮reset

普通按钮button一般都是配合JavaScript来进行各种操作的

提交按钮submit一般都是用来给服务器提交数据的

重置按钮一般用来清除用户在表单上输入的内容

<input type="button" value="取值" />

value的取值就是按钮上的文字

---

文件上传

在HTML中，文件上传也是使用input标签来实现的，其中type属性为file

<input type="file" />

对于具体的如何上传文件，需要学习后端之后才能实现

---

多行文本框

在HTML中，多行文本框使用的是textarea标签而不是input标签

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

多行文本框的默认显示文本实在标签的内部设置，而不是在value属性中设置的，一般情况下不需要设置默认显示文本

分析：对于文本框我们可以总结出HTML有三种文本框，单行文本框、密码文本框、多行文本框，前两种都是使用input标签，而多行文本框使的是textarea标签

---

下拉列表

在HTML中，下拉列表是由select和option这两个标签配合使用来表示的，这一点与列表有相似之处

    <select>
        <option>选项内容</option>
        ......
        <option>选项内容</option>
    </select>

select标签的常用属性

属性	说明
multiple	设置下拉列表可以选择多项
size	设置下拉列表显示几个列表项，取值为整数

    <select multiple>
        <option>选项内容</option>
        ......
        <option>选项内容</option>
    </select>

默认情况下下拉列表只能选择一项。如果想要同时选取多项，首先要设置multiple属性，然后使用Ctrl+鼠标左键来选取

            <select size="4">
                <option>a</option>
                <option>b</option>
                <option>c</option>
                <option>d</option>
                <option>e</option>
                <option>f</option>
                <option>g</option>
                <option>h</option>
            </select>

size属性能设置你的下拉列表最多显示几个列表项

在HTML中，option标签的常用属性有两个

属性	说明
selected	是否选中
value	选项值

selected与单选框的checked属性是一样的

value属性是配合Javascript以及服务器进行操作的

<option selected>a</option>

<option value="a">a</option>

---

---

iframe框架

在HTML，我们可以使用iframe框架来实现一个内嵌框架。内嵌框架是指在当前页面嵌入另一个页面

 <iframe src="链接地址" width="数值" height="数值"></iframe>