HTML-表单标签

一: 概述

表单标签主要是和后端进行交互的,属于块级标签.

二 属性

2.1 name

表单的名称,用于JS操作和控制

2.2 id

表单名称,用于JS操作和控制

2.3 action

制定处理表单数据的程序,也旨表单数据会提交到哪里

2.4 method

表单数据的提交模式,如get,post,默认值为get,也指在提交表单数据时用的方式

2.4.2 GET

以"name=value"的形式追加到action指定的处理程序的后面,中间使用?分隔,多个kv使用&分隔.

特点是: 1: 可以提交少量的数据 2:不安全 3:只支持ASCCI字符

2.4.3 POST

将表单数据以隐藏的方式提交到action指定的处理程序

特点: 1: 可以提交大量的数据 2: 安全 3: 可以支持更多的数据类型(word,image等等)

2.5 Enctype

数据的编码方式,该属性只有在method为POST方法时才能使用

有两个值可选:

• Application/x-www-form-urlencoded  默认的加密方式,出上传文件之外的数据都可以
• Multipart/form-data  上传附件时必须使用该值

三: input标签

input标签主要有以下几种类型,,属于行内块标签 inline-block

3.1  text普通的文本类型

    <form action="">
        <input type="text"> 姓名
    </form>

3.2 password类型

密码类型

    <form action="">
        <input type="text"> 姓名
        <input type="password">密码
    </form>

 3.3 radio类型 单选按钮

需要注意的是,name属性都一样是才能表现出互斥的效果,才能实现单选

    <form action="">
        <input type="text"> 姓名
        <input type="password">密码
        <input type="radio" name="gender" value="man">男
        <input type="radio" name="gender" value="woman">女
    </form>

3.4 checkbox 多选

注意 name属性要一致,才能作为一组数据提交

    <form action="">
        <input type="checkbox" name="hobby"> 打篮球
        <input type="checkbox" name="hobby"> 听音乐
    </form>

3.5  checked

对于单选按钮

    <form action="">
        <input type="radio" name="gender" value="man">男
        <input type="radio" name="gender" value="woman" checked>女
    </form>

对于多选按钮来说

    <form action="">
        <input type="checkbox" name="hobby" checked> 打篮球
        <input type="checkbox" name="hobby" checked> 听音乐
    </form>

3.6  hidden属性

3.7 button

普通按钮,主要为js提交数据

    <form action="">
        <input type="checkbox" name="hobby" checked> 打篮球
        <input type="checkbox" name="hobby" checked> 听音乐
        <input type="button"> 普通按钮
    </form>

 3.8 submit

提交按钮,会将表单数据提交到action指定的程序处理

    <form action="">
        <input type="text"> 姓名
        <input type="password">密码
        <input type="radio" name="gender" value="man">男
        <input type="radio" name="gender" value="woman" checked>女
        <input type="checkbox" name="hobby" value="basketball" checked> 打篮球
        <input type="checkbox" name="hobby" value="music" checked > 听音乐
        <input type="button"> 普通按钮
        <input type="submit">提交按钮
    </form>

 3.9 重置按钮

    <form action="">
        <input type="text"> 姓名
        <input type="password">密码
        <input type="radio" name="gender" value="man">男
        <input type="radio" name="gender" value="woman" checked>女
        <input type="checkbox" name="hobby" value="basketball" checked> 打篮球
        <input type="checkbox" name="hobby" value="music" checked > 听音乐
        <input type="button"> 普通按钮
        <input type="submit">提交按钮
        <input type="reset"> 重置按钮
    </form>

3.10 imag

图片按钮,和提交按钮性质是一致的

3.11 file

文件选择框

    <form action="">
        <input type="text"> 姓名
        <input type="password">密码
        <input type="radio" name="gender" value="man">男
        <input type="radio" name="gender" value="woman" checked>女
        <input type="checkbox" name="hobby" value="basketball" checked> 打篮球
        <input type="checkbox" name="hobby" value="music" checked > 听音乐
        <input type="file">
    </form>

 3.12 value

将value值预先填写在文本框中

    <form action="">
        <input type="text"> 姓名
        <input type="text" value="中国">国籍
    </form>

3.13   size

文本框中可以显示的字符个数,是一个正整数,一个中文或者英文都按照一个字符算

3.14 readonly

只读,不能编辑

    <form action="">
        <input type="text" size="5" > 姓名
        <input type="password" >密码
        <input type="text" value="中国" readonly>国籍
        <input type="submit">
    </form>

3.15 disabled

只读,不能编辑

    <form action="">
        <input type=

"text" size="5" > 姓名
        <input type="password" >密码
        <input type="text" value="中国" disabled>国籍
        <input type="submit">
    </form>

四 select

<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”

select标签标签属性,

• multiple 对下拉列表进行多选
• size 下拉列表可以显示多少个选项

option选项属性 selected属性可以当作默认选择项

      <form>
          <select  >
              <option value="1">小学</option>
              <option value="2">中学</option>
              <option value="3">高中</option>
              <option value="4" selected>研究生</option>
          </select>
    </form>

      <form>
          <select size="2" >
              <option value="1">小学</option>
              <option value="2">中学</option>
              <option value="3">高中</option>
              <option value="4" selected>研究生</option>
          </select>
    </form>

五: textarea 

这是一个文本输入框,主要有如下几种属性

• value: 提交给服务器的值
• rows: 文本区域的行数
• cols: 文本区域的列数
• readony 只读

      <form>
          <textarea name="info" id="1" cols="30" rows="10"></textarea>
    </form>

 六: 表单语义化

    <form action="">
        <fieldset>
            <legend>个人信息</legend>
                姓名: <input type="text"><br>
                密码: <input type="password"><br>
                性别: <input type="radio" name="gendor" value="man">男
                        <input type="radio" name="gendor" value="woman"> 女
        </fieldset>

        <fieldset>
            <legend>其他信息</legend>
                父亲/母亲姓名: <input type="text"><br>
                是否结婚: <input type="radio" name="married" value="1">已婚
                            <input type="radio" name="married" value="2"> 未婚
        </fieldset>

    </form>

七  label标签

如果想将文本内容和标签作为一个整体使用时,如下,代码

                性别: <input type="radio" name="gendor" value="man">男
                        <input type="radio" name="gendor" value="woman"> 女

当我们进行选择的时候,只有点击小圆圈才能选择,点击男或者女时不可以的,如果想做到这种效果可以使用label标签

如下代码

给radio设置id,然后label标签的for属性等于id,将文本内容放入到label标签内,即可实现

    <form action="">
        性别: <input type="radio" name="gendor" value="man" id="nan"><label for="nan">男</label>
            <input type="radio" name="gendor" value="woman" id="nv"><label for="nv">女</label>
    </form>