form表单属性补充

1.form表单功能

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

form表单:获取用户的数据并发送给后端(服务端)

eg:网站的登录、注册、验证码等...

2.表单使用原理

访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。

服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。

input输入的标签两大重要的属性工作原理

获取用户输入的标签两大重要的属性

    name属性

       类似于字典的键

    value属性

      类似于字典的值

其实我们在input里输入的值就是value里面的值，我们在input框里所写的值都会被value所存储，然后点击提交按钮，后端通过每一个input的里面的name来识别收到的数据分别是哪个的值，所以，form表单在朝后端发送数据的时候 标签必须要有name 否则不会发送该标签的值

编写input解释器会出现黄色阴影问题

直接编写input会出现黄色阴影，是说明这么写不太规范，原因在于input需要结合lable一起使用

lable标签：解释说明这么标签将来是干什么的，里面的for属性是用来与input里面的id进行绑定的，绑定之后，他其实以后也是input的一部分，点击lable标签也就相当于点击了lable标签。

方式1:lable包裹input并绑定id

   <label for='input标签id值'>input标签</label>

方式2:label与input单独出现并绑定id

<label for="d1">username:</label>

   <input type="text" id="d1">

获取用户输入的标签如果不是让用户自己写而是选择 那么标签需要自己写value

<input type="radio" name="gender" value="male">男

<input type="checkbox" name="hobby" value="basketball">篮球

<select name="province" id="">

	<option value="sh">上海</option>

</select>

针对radio和checkbox可以默认选中

checked="checked" 如果属性名和属性值相等 那么可以简写  checked

针对option标签也可以默认选中

selected="selected" 简写为 selected



完整注册页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<h2>注册页面</h2>

<form action="">

    <p>  <!--用户名注册-->

        <label for="d1">username:</label>

        <input type="text" id="d1">

    </p>

    <p>  <!--密码注册-->

        <label for="d2">password:</label>

        <input type="password" id="d2" placeholder="密码">

    </p>  <!--type属性 date 日历展示-->

    <p>birthday:<input type="date"></p>

    <p>  <!-- radio:单选   gender:性别 表指定名称   checked="checked":默认选中-->

        <input type="radio" name="gender" checked="checked">male

        <input type="radio" name="gender">female

        <input type="radio" name="gender">others

    </p>

    <p>hobby:  <!-- checkbox:多选 -->

        <input type="checkbox" checked>篮球

        <input type="checkbox" checked>足球

        <input type="checkbox" checked>双色球

    </p>

    <p>email:  <!--邮箱-->

        <input type="email">

    </p>

    <p>province  <!--地区-->

        <select name="" id="">

            <option value="">北京</option>

            <option value="" selected>深圳</option>

            <option value="">上海</option>

        </select>

    </p>

    <p>明星

        <select name="" id="">

            <option value="">李易峰</option>

            <option value="">张云龙</option>

            <option value="">胡一天</option>

        </select>

    </p>

    <p>info:  <!--个人简介-->

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

    </p>

    <p>file:  <!--上传文件-->

        <input type="file">

    </p>

    <p>files:  <!--上传文件-->

        <input type="file" multiple>

    </p>

    <p>

        <input type="submit" value="注册">

        <input type="button" value="帮助">

        <input type="reset" value="重置">

    </p>

</form>

</body>

</html>

form表单属性补充的更多相关文章

  1. 12月9日内容总结——静态文件以及配置、form表单属性的作用、request对象、python连接数据库和Django连接数据库、ORM的基础知识介绍

    目录 一.静态文件 1.静态文件概念 2.资源访问 3.静态文件资源访问 二.静态文件相关配置 1.接口前缀 2.接口前缀动态匹配 三.form表单 action属性 method属性 四.reque ...

  2. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  3. HTML5的form表单属性

    form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...

  4. js form 表单属性学习

    一.<form></form>标签      引用借鉴:http://www.cnblogs.com/fizx/p/6703370.html form标签的属性规定了当前网页上 ...

  5. Django基础之form表单的补充进阶

    1. 应用Bootstrap样式 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  6. django中form表单的提交：

    一,关于表单: 表单在百度百科的解释:   表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 ...

  7. Html form表单大全（一）

    在前后端交互的过程中,除了ajax请求之外,最常见的就是表单请求了. 由于form表单属性多,表单标签内容多且复杂,不深究的话很难全面的弄明白. 接下来就来详细的说一说整个form表单都有些什么,并且 ...

  8. fsLayuiPlugin数据表格弹出form表单说明

    fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...

  9. [oldboy-django][2深入django]学生管理（Form）-- 添加（美化Form表单:通过form给前端标签添加属性）

    1 在student_list添加一个a标签, <p><a href="/app01/add_student" class="btn btn-prima ...

  10. form表单的属性标签

    form表单的常用标签 表单: <form id="" name="" method="post/get" action=" ...

随机推荐

  1. dfs优化剪枝

    题目链接:D - Peaceful Teams (atcoder.jp) 先看数据范围,肯定是搜索相关 首先想到从第1个人, 第0个队开始的搜索顺序 ,因为这属于内部顺序,所以每次搜索要回溯状态,注意 ...

  2. 洛谷 P5066 [Ynoi2014] 人人本着正义之名debug-log

    序言 此日志分为四部分. 00:00是开始打代码的时间. 最开始打完代码(没有debug)大约用了两小时. part1-20210323 02:30 生成新节点时,没有给随机权值. 02:41 upd ...

  3. 袋鼠云：基于Flink构建实时计算平台的总体架构和关键技术点

    数栈是云原生-站式数据中台PaaS,我们在github和gitee上有一个有趣的开源项目:FlinkX,FlinkX是一个基于Flink的批流统一的数据同步工具,既可以采集静态的数据,也可以采集实时变 ...

  4. DTALK直播预约 | 金融行业嘉宾分享：金融机构数据治理实践路径

    金融业天然就是一个经营数据的行业,一直对数字技术保持高度重视,是数字化转型最早和数字技术应用最广的行业之一.在金融和技术融合过程中,数据治理是关键.当前金融数据治理已由过去局部数据管理,发展到统筹数据 ...

  5. MongoDB入门实战教程（11）

    前面我们学习了在MongoDB中的写操作事务管理,本篇我们开始进入读操作事务. 1 读数据关注的两个问题 在通过mongodb读取数据时,我们一般需要关注两个问题: (1)从哪里读取? (2)什么样的 ...

  6. AES之CryptoJS加密与C#解密

    曾经以为ChatGpt 应该是无所不知道,无所不能的,但是就这个C# 解密用了两天时间来搞,gpt给的代码一直有各种bug,最后还是要靠搜索引擎Bing的帮助才找到了答案AES加密之CryptoJS与 ...

  7. JuiceFS 社区版 V1.3 正式发布：支持 Python SDK、亿级备份加速、SQL 和 Windows 全面优化

    JuiceFS 社区版 v1.3 今日正式发布,是自 2021 年开源以来的第四个重要版本.四年多的开源历程中,JuiceFS 在 GitHub 上已获得超 11.8K star,数据用量超过 800 ...

  8. CF1990D Grid Puzzle 题解

    CF1990D Grid Puzzle DP 好题.考虑分析两种操作的性质,不难发现操作 \(1\) 至多只能涂白 \(4\) 个方格,而操作 \(2\) 可以涂白的方格取决于这一行的方格数,几乎无上 ...

  9. C2. Pokémon Army (hard version) CF #672

    题意:给你一个序列,让你任意选出一个子序列,使得奇数位和减去偶数位和最大.同时有q个询问,输出每次交换完a[l]和a[r]后的上述最大值. 思路:首先肯定可以确定选出来的子序列长度为奇数,因为偶数位只 ...

  10. NBJS 笔试记录

    1. 然后要知道三极管是NPN还是PNP. 一般说NPN管, 工作在放大区的时候要求,集电极反偏,发射极正偏,这要求集电极电压>基极电压>发射极电压. 也就是一楼说的Vc>Vb> ...