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. Disruptor—4.与Netty的简单应用

    大纲 1.服务端代码最佳实践 2.客户端代码最佳实践 3.Netty的高性能核心问题分析 4.基于Disruptor异步化处理Netty的长链接业务 5.Disruptor核心池化封装实现 6.实现接 ...

  2. React-Native开发鸿蒙NEXT-多bundle的加载

    .markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...

  3. 「Log」2023.8.24 小记

    序幕 \(\texttt{7:20}\):才到校,昨天调题整半夜去了,没想到这么晚来的人也少. 按惯例整理博客. 补题,补串串. \(\color{blueviolet}{P2444\ [POI200 ...

  4. Kubernetes数据存储-本地存储

    简单存储 EmptyDir EmptyDir是最基础的Volume类型,一个EmptyDir就是Host上的一个空目录. EmptyDir是在Pod被分配到Node时创建的,它的初始内容为空,并且无须 ...

  5. WebSocket网络通信

    WebSocket 网络通信 导入依赖: <!-- WebSocket依赖 --> <dependency> <groupId>log4j</groupId& ...

  6. mysql练习题版本一

    有些题还没有解决 -- 查询" 01 "课程比" 02 "课程成绩高的学生的信息及课程分数 1.1 查询同时存在" 01 "课程和" ...

  7. wc记录

    WC记录 咋可 随机化 CF1746F 给每个值随机成\(0/1\),然后查询区间内的所有数的和是否\(\equiv0\mod k\) 考虑错误率,对于一个不合法的权值,设其有\(r\)个,考虑区间内 ...

  8. js调用后台接口下载excel文件

    // 下载模板function DownloadExcel() { console.log("进入方法"); const xhr = new XMLHttpRequest(); x ...

  9. 另辟蹊径：利用代理驱动绕过JDBC Attack检测

    0x01起因 以前徐师傅刚公开H2 JDBC RCE的时候我就用来打致远,打了大概两年然后修了最开始是直接用反斜线就可以绕过,后面添加了下面的判断. 新增了一个com.seeyon.ctp.giant ...

  10. dotnet 代码调试方法

    本文将会从基础到高级,从简单到复杂的顺序,告诉大家如何调试 dotnet 系应用,特别是桌面端应用.本文将会向大家介绍使用 VisualStudio 大量的功能用来提高调试效率,穿插着也会介绍一些好用 ...