HTML 表单内容的详细介绍

HTML表单内容的详细介绍

HTML 表单是用于搜集不同类型的用户输入的，表单是一个包含表单元素的区域；表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素；表单使用表单标签（<form>）定义。

一、介绍

1、表单概念

表单最重要的表现是在客户端接收用户的信息，然后将数据递交给后台的程序来操控这些数据，从技术的概念上说，表单就是用来操作form对象，对象是一种基本的数据类型

2、创建表单

表单通过<form>标签来创建，其中放置表单的对象，如表单域、按钮和其他事物，<form>标签中可扩展几个属性

a.action属性

通过<form>标签定义的表单里面必须有action属性才可以将表单中的数据递交上去

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

以上代码表示这个表单的作用是用来提交到check.php这个页面的数据

b.method属性

该属性的作用是告诉浏览器数据是以何种方式提交上去的，该属性下有两个选择：”get”和”post”。

默认情况下，数据被提交的方式是get，表单域中输入的内容会添加在action指定的URL中，当表单提交后用户便获得一个明确的URL，由于这种方式下数据会添加到URL中，而post 这种方式，数据将以HTTP头的形式发送，表单数据不再是URL中的一部分。二者区别是get在安全性上较差，所有表单域的值 直接呈现，而post除了可见的处理脚本程序以外，别的东西都可以隐藏，所以在实际运用时通常选择post这种处理方式。

post:数据在请求体中，不在url中，安全，可发送大量数据，例如文件上传 。

get:数据在url中， 明文发送，适合少量数据，不超过4k。

<form action="check.php" method="POST">
</form>

c.name属性

作用是令提交上去的表单数据可以被处理这些数据的程序识别，大部分页面中放入的表单很可能不止一个，此时就需要给不同 的表单起不同的名字，以便程序识别

<form action="check.php" method="POST" name="student">
</form>

d.enctype属性

该属性代表HTML表单数据的编码方式，分别有application/x-www-form-urlencoded（标准编码方式，提交的数据被编码为名称/ 值对）、multipart/form-data（表示数据编码为一条信息，为表单定义了MIME编码方式，创建了一个与传统不同的POST缓冲 区，页面上每个控件对应消息的一个部分）和text/plain（表示数据以纯文本的形式进行编码，这样在信息中将不包含控件或格 式字符）共三种方式

<form action="check.php" method="POST" name="student" enctype="multipart/form-data">
</form>

上述代码表示：不对字符编码，发送二进制文件数据。当使用有文件上传控件的表单时，必须设置该值。

3、表单域：即用户输入数据的地方

表单域可以分为input、textarea、select 3个对象，其中大部分表单通过input属性来实现，textarea和select创建一种控制类型

二、input对象下的多种表单表现形式

页面中大部分表单的形式都是通过输入标记input来实现的

<form action="check.php" method="POST">
    <!-- 单行文本框 -->
    <div>
        <label for="username">账号：</label>
        <input 
               type="text"
               id="username"
               name="username"
               placeholder="不少于8位"
               required
               autofocus
               value="lisi"
               />
    </div>
</form>

a.其中name表示输入数据的名字，其作用是为了让程序明白所提交的数据，如果缺少了这样一个name属性，虽然在浏览器中的显示没有什么变化，但是后台程序就不能获得提交的数据

b.type属性表示所定义的是哪种类型的表单形式，该属性有九个可选值:

text 单行的文本框
password 将文本替换为”*”的文本框
checkbox 只能做二选一的是或否选择
radio 从多个选项中确定的一个文本框
submit 确定命令文本框
hidden 设定不可被浏览用户修改的数据
image 用图片表示的确定符号
file 设置文件上传
button 用来配合客户端脚本

c.placeholder:表示文本框字段的提示信息

d.required:表示字段不能为空

e.autofocus:表示页面一打开文本框自动获取焦点

f.value:表示预先设置好的信息

4、checkbox复选框的表单样式（浏览器会在选择栏前面提供一个小方框如果选择小框中会添加小勾符号表示选中）

<form action="check.php" method="POST">
    <!-- 复选框 -->
    <div>
        <!-- 单选按钮中的name属性,必须全部一样,才能保证返回唯一值 -->
        <!-- hobby[]表示数组,可以保存一组不同类型的数据,供后端调用 -->
        <label for="">爱好：</label>
        <input type="checkbox" name="hobby[]" id="game" checked /><label for="game">游戏</label>
        <input type="checkbox" name="hobby[]" id="trave" /><label for="trave">旅游</label>
        <input type="checkbox" name="hobby[]" id="shoot" /><label for="shoot">摄影</label>
        <!-- checked布尔属性，不需要值，只要存在就是true / 真 -->
    </div>
</form>

上面代码中添加了checked=”checked”表示复选框默认值设置为checked,那么√符号会被默认添加

5、radio单选按钮的样式表单（多选一表单）

<form action="check.php" method="POST">
    <!-- 单选框 -->
    <div>
        <label for="sex">性别</label>
        <!-- 单选按钮中的name属性，必须全部一样，才能保证返回唯一值 -->
        <input type="radio" name="sex" id="male" value="1"><label for="male">男</label>
        <input type="radio" name="sex" id="female" value="0"><label for="female">女</label>
        <input type="radio" name="sex" id="secret" value="-1" checked><label for="secret">保密</label>
        <!-- checked布尔属性，不需要值，只要存在就是true / 真 -->
    </div>
</form>

6、提交表单数据

a.submit提交方式

<form action="check.php" method="POST">
    <!-- 单行文本框 -->
    <div>
        <label for="username">账号：</label>
        <input type="text" name="username" value="lisi" />
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </div>
</form>

b.onsubmit提交方式

<form action="check.php" method="POST" onsubmit="return false;">
    <!-- 单行文本框 -->
    <div>
        <label for="username">账号：</label>
          <input type="text" name="username" value="lisi" />
    </div>
    <button>提交</button>
    <!-- 重置不是清空,是恢复到默认值 -->
    <button type="reset">重置</button>
    <!-- 不想提交,想自定义提交验证的规则,例如异步ajax提交 -->
</form>

7、hidden隐藏域的样式表单

hidden属性可以创建一个隐藏域，数据会被隐藏起来，用户无法对其进行操作（这些数据通常是用户不关心的但是必须被提交 的数据）

8、file上传文件的样式表单

该表单允许用户上传自己的文件，例如用户上传自己的图像给服务器，用来改变用户在不同网站上的形象图片。需要注意的 是，当使用file样式的表单时，必须在<form>标签中说明编码方式，这样服务器才可以接收到正确信息

<form action="check.php" method="POST" name="myFile" enctype="multipart/form-data">
    <input type="file" name="uploadfile"> 
</form>

三、textarea对象的表单

该对象就像是input对象中的text表单，只不过是扩展过的text样式表单，可以通过行(rows)属性和列(cols)属性来编辑文本域的大 小，常见于留言板、论坛中回帖时的文本框等

<form action="check.php" method="POST" >
<textarea name="some" rows=10 cols=50 value="say">请文明用语:</textarea>
</form>

textarea属性标签必须要封闭，且生成页面时在文本框中会预先设置好文本“请文明用语”，但是用户不得不先删去预先的文本再 编辑自己的内容。当文本框中输入的内容超出预先设置的行数时会自动出现滚动条，如果没有超出文本框的范围则滚动条是灰色的

四、select对象表单

使用select将创建一个列表样式的表单，显示为出现一个下拉列表框，令用户可以方便的选择其中一个目录，通常在一些要求填 写地区、生日等信息中，设计者可以给使用者准备好选项，需要使用<option>标签来定义可供选择的每一项

<form action="check.php" method="POST">
    <div>
        <!-- 下拉列表,将变量名和多个值分开设置,由用户自己选择 -->
        <!-- name, value应该在一个标签内,但是select -->
        <select name="level">
            <option value="1">铜牌会员</option>
            <option value="2">银牌会员</option>
            <option value="3" selected>金牌会员</option>
            <option value="4">永久会员</option>
        </select>
    </div>
</form>

用户可以通过下拉列表框选择一个“会员”，而这个数据会被表单发送到服务器，此外还可以通过value属性为每一个option指定不 同的值，这样的话value设置的值将取代option的文本内容。注意如果设计者希望预先设置初始值，那么在所希望的option中添加 selected=”selected”就可以了，如<option selected="selected">金牌会员</option>,否则默认初始值应该是第一个出现的<option> 的文本内容。

b.自定义下拉列表

<form action="check.php" method="POST">
    <div>
        <label for="">搜索关键字：</label>
        <input type="search" name="search" list="keywords" / >
        <datalist id="keywords">
            <option value="html">html</option>
            <option value="css">css</option>
            <option value="js">js</option>
            <option value="php">php</option>
        </datalist>
    </div>
</form>

五、表单域集合

如果表单的项目过多或为了修饰表单部分，可以通过使用表单域将表单分组，表单域的代码由<fieldset>标签和<legend>标签组 合而成，默认情况下，<fieldset>标签勾画出表单域的框形，<legend>标签的对象像标题一样出现在框的左上角

  <form action="check.php" method="POST" style="display: grid;gap:0.5em" onsubmit="return false;">
        <fieldset>
            <legend>必填项</legend>
             <!-- 单行文本框 -->
            <div>
                <label for="username">账号：</label>
                <input 
                    type="text"
                    id="username"
                    name="username"
                    placeholder="不少于8位"
                    required
                    autofocus
                    value="lisi"
                />
            </div>
            <div>
                <label for="psw">密码：</label>
                <input type="password" id="psw" name="psw" placeholder="不少于6位" required />
            </div>
      </fieldset>
</form>