zoukankan      html  css  js  c++  java
  • form表单

    1 什么是表单

      就是从浏览器向服务器传输数据的手段(用于显示、收集信息,并且提交信息到服务器)

    2 表单二要素

      2.1 form元素:就是有内容和属性的form标签

      2.2 表单控件: 就是可以放到表单域里面的控件(就是信息输入项)

    3 补充之标签和元素的区别

      3.1 标签

        标签就是<head>、<body>、<table>等被尖括号“<”和“>”包起来的对象,绝大部分的标签都是成对出现的,如<table></talbe>、<form></form>。当然还有少部分不是成对出现的,如<br>、<hr>等。 (标签就是没有属性和内容的元素)

      3.2 元素

        元素由一个开始的标签和结束的标签组成并且包含内容、拥有属性(故:元素就是拥有属性和内容的标签)  

        HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件,并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说,HTML元素就是构成HTML文件的基本对象,HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。 

    4 表单元素

      4.1 表单定义

        使用<form></form>标记;<form>和</form>之间的区域叫做表单域,所有的表单控件都要写在表单域中;表单域中的数据就是要传输给服务器的数据

      4.2 表单主要属性

        4.2.1 action -->> 提交表单的URL

        4.2.2 method -->> 提交数据的方式

        4.2.3 enctype -->> 数据进行编码的方式 

    5 表单控件

      5.1 input元素

        不同的type类型代表不同外观的input元素:

          text:文本框  password:密码框

          radio : 单选框  checkbox : 复选框

          submit : 提交按钮(提交表单数据给服务端或者其他程序)  

          reset : 重置按钮(清空表单内容并且恢复到默认值)  

          button : 普通按钮(用于执行客户端脚本)

          hidden : 隐藏域(用于书写在表单中不让用户看见的信息)

          file : 文件选择框(选择要上传的文件)

        5.1.1 文本框、密码框

          5.1.1.1 属性

            value : 访问者输入的任何文本

            maxlength : 限制输入的字符数量

            readonly : 将文本控件设置为只读

        5.1.2 单选框、复选框

          5.1.2.1 属性

            value : 程序员设定的文本值;当提交form时,被选中的控件的value值就会被提交到服务器

            name :  用于实现分组,同一组的单选框必须相同;分组后每一组只有一个元素能够被选中(例子:性别的选择) 

            

            利用name的值相同来实现单选只能适用于单选框;对于复选框而言name值是否相同都都可以实现多选

            

            checked : 将表单控件设置成被选中

        5.1.3 提交按钮、重置按钮、普通按钮

          5.1.3.1 属性

            value : 按钮的名字(value属性的默认值是“提交”)

        5.1.4 隐藏域、文件选择框

      5.2 label元素

        用于给控件设置显示名称

        5.2.1 语法

          <label for="控件id">文本</label>

          注意:这里的文本可以是图片、视频......

        5.2.2 属性

          for : 设置文本所关联的控件id,关联后点击label元素就相当于点击了关联的控件

      5.3 textarea元素(文本域元素)  

        5.3.1 语法

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

        5.3.2 属性

          cols : 指定列数

          rows : 指定行数

          readonly : 设定为只读

      5.4 select元素(下拉选择内容元素)

        5.4.1 语法    

    1 <select name="选择" id="">
    2                 <option value="1">java</option>
    3                 <option value="2">python</option>
    4                 <option value="3">c++</option>
    5             </select>
    select元素语法

      5.5  提交的注意事项

        5.5.1 任何表单控件都有的属性: id name value

        5.5.1 只有书写了name属性的表单控件才可以进行提交,而且提交的内容就是value的属性值(可以不书写value属性,但是每个表单控件都会被自动添加上value属性,而且value属性的属性是动态变化的,所以在进行提交的时候是提交的最新的value属性值)

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset = "utf-8" />
     5         <meta name="Keywords" content="" />
     6         <mata name = "description" content = "" />
     7         <title>单项测试</title>
     8         <link rel="stylesheet" href="test.css">
     9         <form action="">
    10             账号:<input value="zhanghao" name='user' type="text" placeholder="请输入账号" />
    11             <br />
    12             <br />
    13             密码:<input name='password' type="password" placeholder="请输入密码">
    14             <br />
    15             <br />
    16 
    17             性别:
    18             <input type="radio" name="gender" />&nbsp;
    19             <input type="radio" name="gender" />&nbsp;
    20             <input type="radio" name="gender" />不告诉你
    21             <br />
    22             <br />
    23 
    24             爱好:
    25             <input id="basketball" name="'habbit'" type="checkbox"><label for="basketball"><img src="../img/123.jpg" alt=""></label>&nbsp;
    26             足球<input name="'habbit'" type="checkbox">&nbsp;
    27             排球<input name="'habbit'" type="checkbox">&nbsp;
    28             <br />
    29             <br />
    30 
    31             <textarea readonly="readonly" name="" id="" cols="30" rows="10">nihao</textarea>
    32             <br />
    33             <br />
    34             
    35             <input type="hidden" value="hello" name="hidden" checked="checked" />
    36             <br />
    37             <br />
    38 
    39             <input type="file" name="file" />
    40             <br />
    41             <br />
    42 
    43             <select name="选择" id="">
    44                 <option value="1">java</option>
    45                 <option value="2">python</option>
    46                 <option value="3">c++</option>
    47             </select>
    48             <br />
    49             <br />
    50 
    51             <input type="submit" value="点击提交" name="tj" />
    52             <br />
    53             <br />
    54 
    55             <input type="reset" value="点击重置" name='cz'/>
    56         </form>
    57         <form action=""></form>
    58     </head>
    59 <body>
    60     <p>测试</p>
    61 </body>
    62 </html>
    该篇博客源代码

        

  • 相关阅读:
    vue echarts 遇到的bug之一 无法渲染的问题
    前端SSR方案调研
    【读书笔记】数据结构与算法js描述-链表实现
    【转发】数组,字符串常用方法
    【转】README.md 语法汇总
    webpack 配置遇到的坑
    原生audio 实现音频播放器功能
    活动抽奖组件设计
    理解vue-loader
    kpi sql 积累
  • 原文地址:https://www.cnblogs.com/NeverCtrl-C/p/6582770.html
Copyright © 2011-2022 走看看