html零基础必看——html入门,编程就是如此简单


第十二章:表单、表格标签

  • 一、form表单
  • 1.1 form表单标签
  • 1.2 input 输入表单控件标签
  • 1.2.1 text文本框
  • 1.2.2 password密码框
  • 1.2.3 radio单选框
  • 1.2.4 checkbox多选框
  • 1.2.5 普通按钮 提交按钮 重置按钮
  • 1.2.6 image 图像提交按钮
  • 1.2.7 css3新特性
  • 2 `:focus`表单获得焦点时被选中
  • 二、select下拉菜单
  • 三、textarea 多行输入文本框
  • 四、 表格
  • 总结


一、form表单

表单主要是为了用户的信息,采集数据,将用户输入的信息发送到服务器,然后返回给登录接口。

1.1 form表单标签

用来标记一个表单,存储表单数据
语法格式:
<form action="" method="" name="" target="">表单内容</form>

form表单标签的一些属性:

  • form 表单域
  • action: 表示提交地址
  • name:表单名称
  • target: 提交完表单之后新页面在哪里打开。前面a链接里有讲到

1.2 input 输入表单控件标签

  • input是行内元素,因此可以在一行显示。同时,input又是置换元素,因此支持宽高属性。(在前面第五章中: 二、行内元素有讲到,img、input都是行内元素,又是置换元素)

格式:<input type="输入控件类型" >

input 输入表单控件的一些属性:

  • placeholder: 提示你要输入什么内容
  • value: 表示控件里面默认输入的内容
  • disabled: 禁止选中 你选择内容
  • checked: 用在单选和多选身上 表示默认勾选

1.2.1 text文本框

格式:<input type="text" name= "username" id="" placeholder="" value="" size="" maxlength="" minlength="">

  • name:文本框的名字,可以重复
  • id: 也是文本框的名字,不可以重复
  • placeholder :提示你要输入什么内容
  • value: 表示控件里面默认输入的内容
  • size:文本框的宽度
  • maxlength:文本框最大输入字符数
  • minlength:文本框最小输入字符数

1.2.2 password密码框

格式:<input type="text" name= "username" id="" placeholder="" value="" size="" maxlength="" minlength=""> 密码框和文本框属性、格式和文本框一样,只是密码框输入的内容会被小黑点代替

1.2.3 radio单选框

格式:<input type="radio" name="" checked vaule><label for="">单选项的名称</label>

  • name:单选框的名字。注意:同一组单选框里面的每一组单选项的name名字必须一致
  • checked:表示默认勾选该项选择的内容
  • disabled: 禁止选中该项选择的内容
  • vaule:单选框的预设值(向服务器提交数据时传递的值)
  • <label></label>标签 :辅助input标签进行选择

1.2.4 checkbox多选框

格式:<input type="checkbox" name="" checked vaule><label for="">当前选项的名称</label>

  • name:单选框的名字。注意:同一组复选框里面的每一组单选项的name名字必须一致
  • checked:表示默认勾选该项选择的内容
  • disabled: 禁止选中该项选择的内容
  • vaule:复选框的预设值(向服务器提交数据时传递的值)
  • <label></label>标签 :辅助input标签进行选择
<form action="">
        账号:<input type="text" name="username" placeholder="请输入账号" value="123456"><br>
        <!-- 因为input是行内元素,不会自动换行,所以我们加上一个换行符 -->
        密码:<input type="password" name="password" placeholder="请输入密码" value="123456">
         <form action="">
        性别:
        <input type="radio" name="sex" checked><label for="boy">男孩</label>
        <!-- 男孩里面加上了checked 表示默认勾选男孩 -->
        <input type="radio" name="sex"><label for="girl">女孩</label>
        <br>

        喜欢的科目:
        <input type="checkbox" name="subject" checked><label for="Chinese">语文</label>
        <!-- 语文里面加上了checked 表示默认勾选语文 -->
        <input type="checkbox" name="subject"><label for="math">数学</label>
        <input type="checkbox" name="subject"><label for="English">英语</label>
        <input type="checkbox" name="subject"><label for="physical">物理</label>
        <input type="checkbox" name="subject" checked><label for="history">历史</label>
        <!-- 历史里面加上了checked 表示默认勾选历史 -->

        <input type="reset" value="重新选择">
        <!-- 默认值就是重置,此处通过value改变预设值 -->
    </form>

1.2.5 普通按钮 提交按钮 重置按钮

  • botton:普通按钮(普通按钮可以通过js绑定脚本程序,完成一些操作,后要结合后面的js)结合js如:<input type="button" value="给关闭" oncClick="WinClose()">
  • submit:提交按钮,可以激发表单提交的动作 (结合后面js,如一些注册、登录功能的实现)
  • reset: 重置按钮,可以将表单恢复到初始的页面
    这三种按钮都可以通过value属性指定按钮上显示的文字内容

1.2.6 image 图像提交按钮

格式:<input type="image" src="作为图像按钮的图片路径"> -->

<form action="">
        <input type="button" value="我是普通按钮">
        <br>
        <input type="submit" value="我是提交按钮">
        <input type="reset" value="我是重置按钮">

        <!-- 使用图片作为提交1按钮的样式 -->
        <input type="image" src="./img/2.jpg" width="30px" height="30px">
    </form>

效果图:

vfp表单集的属性和事件 vfp表单常用属性_html

1.2.7 css3新特性

<form action="">
        <!-- 7.文件上传框file -->
        <!-- css3新特性 -->
          <!-- 文件上传  -->
          <input type="file"><br>   
           

          <!-- 日期选择框 -->
          请选择日期:<input type="date"><br>

          <!-- 时间 -->
          请选择时间:<input type="time"><br>
          
          <!-- 数字输入框  只能输入数字 字母e是特殊数字 -->
          请输入数字:<input type="number" placeholder="只能输入数字,字母e是特殊数字"><br>

          请滑动滑块验证:<!-- 数字滑块 -->
          <input type="range"><br>
          
          <!-- 颜色 -->
          请选择颜色:<input type="color"><br>
          
          <!-- 电子邮件 -->
          请输入电子邮件:<input type="email" placeholder="请输入电子邮件"><br>
    </form>

效果图:

vfp表单集的属性和事件 vfp表单常用属性_vfp表单集的属性和事件_02

2 :focus表单获得焦点时被选中

鼠标点击表单控件输入框时,外面的输入框可通过css修改的样式显示。
只限于表单标签使用才会生效。

这段样式加入rest(1).css外部样式里,引入就行 
       /* 清除默认焦点边框 */
        button,input{
            outline: none;
        }

格式:

选择器:focus {/写样式/}

<style>
        /* 这段加入rest(1).css外部样式里,引入就行 */
       /* 清除默认焦点边框 */
        button,input{
            outline: none;
        }

        .text{
            width: 200px;
            height: 50px;
            border: 1px solid red;
        }
        /* 点击表单控件    获取焦点选中
        鼠标点击表单控件输入框时,外面的输入框可通过css修改的样式显示
        */
        .text:focus{
            border: 1px solid green;
        }

    </style>
</head>
<body>
    账号:<input type="text" name="username" class="text" placeholder="请输入账号">
    <br>
    密码:<input type="password" name="password" class="text" placeholder="请输入账号">

效果图:鼠标点击输入控件框时,这个控件框颜色会变成样式里面自己更改的颜色。

vfp表单集的属性和事件 vfp表单常用属性_javascript_03

二、select下拉菜单

  • select是一个容器元素,标记一个菜单或下拉列表。它所包含的option元素标记一个菜单或下拉列表中的每一项。
  • 当select使用multiple属性时,用户可以同时选择列表中的多项内容
  • option标记的selected属性指定该项被选取,默认是第一项被选取
  • option标记的disabled属性指定该项不可用
<label for="season">请选择最喜欢的季节</label>
    <select name="" id="">
        <option value="red">春天</option>
        <option value="green">夏天</option>
        <option value="blue" selected>秋天</option>
        <!-- option标记的selected属性指定该项被选取,默认是第一项被选取 -->
        <option value="white" disabled>冬天</option>
        <!-- option标记的disabled属性指定该项不可用 -->
    </select>

效果图:

vfp表单集的属性和事件 vfp表单常用属性_html_04

三、textarea 多行输入文本框

一般用于网页底部留言之类的多行输入文本框
格式:<textarea name="textarea" id="" cols="number" rows="number" placeholder="欢迎留言" readonly></textarea>

  • textarea:伸缩文本框元素
  • cols: 每一行中字符数量
  • rows: 显示行数
  • placeholder: 提示你要输入什么内容
  • readonly:设定多行文本区只读,不能编辑和修改
<textarea name="textarea" id="" cols="number" rows="number" placeholder="欢迎留言" readonly></textarea>

效果图:鼠标点击右下角可以伸缩文本框大小

vfp表单集的属性和事件 vfp表单常用属性_html_05

四、 表格

  • table:表格标签,table标记代表一个表格
  • tr:行 有多少个tr,就有多少行
  • td :单元格,一行里有多个td单元格构成
  • th:表头 一般用于表格的第一行或第一列
  • caption :表格标题
<style>
        table {
            width: 300px;
            height: 50px;
            border: 1px solid red;
        }

        th,
        tr,
        td {
            width: 100px;
            height: 50px;
            border: 1px solid pink;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 定义表格 -->
    <table>
        <!-- 表格里面的一行 -->
        <tr>
            <!-- 表示单元格 -->
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>你好</td>
            <td>18岁</td>
            <td>456</td>
        </tr>

    </table>

    <!-- 
         table  定义表格标签
         caption: 定义表格标题
         tbody: 表格内容  不写也会自动生成
         th:表头标签
         tr:表格一行   
         td:表示表格里一个单元格   必须嵌套在 tr中标签

        thead:代表表格头部
        tbody: 表格内容  不写也会自动生成
        tfoot:代表表格尾部
            
        
     -->

    <table>
        <!-- 定义这个表格标题 -->
        <caption>老师调查表</caption>
        <tr>
            <!-- 表头 -->
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>
            <th>性别</th>
        </tr>
        <tr>
            <!-- 单元格 -->
            <td>小春</td>
            <td>18岁</td>
            <td>写代码</td>
            <td>男</td>
        </tr>
        <tr>
            <!-- 单元格 -->
            <td>无限</td>
            <td>19岁</td>
            <td>喜欢漂亮小姐姐</td>
            <td>男</td>
        </tr>
        <tr>
            <!-- 单元格 -->
            <td>夏栀老师</td>
            <td>19岁</td>
            <td>爱吃小龙虾 螃蟹</td>
            <td>女</td>
        </tr>
    </table>

效果图:

vfp表单集的属性和事件 vfp表单常用属性_html_06


表格合并单元格:

合并单元格

公式: 合并单元格个数 - 1 = 删除个数

rowspan: 跨行合并   合并顺序是从上往下  合并的
  
  colspan: 跨列合并  先左后右
<style>
        table{
            width: 900px;
            border: 1px solid red;
            margin: 30px auto;
            /* 表格  单边框样式 */
            border-collapse: collapse;
        }
        tr,td,th{
            width: 350px;
            height: 60px;
            border: 1px solid #096;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 合并单元格  难点 -->
    <table >
        <!-- 表格标题 -->
        <caption>征婚表</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>征婚条件</th>
        </tr>
        <tr>
            <td>黄黄</td>
            <td>男</td>
            <td rowspan="3">21岁</td>
            <!-- 这是跨行合并, 此处td rowspan="3",后面删除两个第三列的td即可-->
            <td>21岁-29岁 特征:美女</td>
        </tr>
        <tr>
            <td>文文</td>
            <td rowspan="2">女</td>
            <!-- <td>21岁</td> -->
            <td>22岁-28岁 特征:有钱</td>
        </tr>
        <tr>
            <td>水水</td>
            <!-- <td>女</td> -->
            <!-- <td>21岁</td> -->
            <td>22岁-28岁 特征:有钱</td>
        </tr>
        <tr>
            <td>西西</td>
            <td>男</td>
            <td>22岁</td>
            <td>21岁-30岁 特征:有钱 美女</td>
        </tr>
        <tr>
            <td>南南</td>
            <td>男</td>
            <td>22岁</td>
            <td>21岁-30岁 特征:有钱 美女 黑丝</td>
        </tr>

        <tr>
            <!-- 这是跨列合并, 此处td colspan="4",后面删除本行里的3个td即可-->
            <td colspan="4">都喜欢漂亮的小姐姐</td>
            <!-- <td>都喜欢漂亮的小姐姐</td>
            <td>都喜欢漂亮的小姐姐</td>
            <td>都喜欢漂亮的小姐姐</td> -->
        </tr>
    </table>
    <!-- 
       合并单元格   
         公式:  合并单元格个数(2) - 1 = 删除个数 2

      rowspan: 跨行合并   合并顺序是从上往下  合并的
      
      colspan: 跨列合并  先左后右-->

效果图:

vfp表单集的属性和事件 vfp表单常用属性_前端_07

总结

上述是小编为大家整理的form表单,以及input输入表单控件的一些类型、同时也补充了下拉菜单、多行文本输入框,最后还讲到表格、表格的单元格合并等结合相关案例做了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的,或有不确之处和疏漏的地方,还望各位大佬能够不吝赐教,加以斧正,小编在此先行谢过了。