一、表单

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

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

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

表单属性

action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

method: 表单的提交方式 post/get默认取值就是get

注意啦！！！！

  1. from表单：实现用户与web服务器的交互
  2. 以键值对的形式发过去{"":"haiyan","":"123"}
  3. 如果没有name属性，你的数据是不过去的
  4. name:键名
  5.  
  6. 请求server端的方式：
  7.     get:请求会放在url后面 username=yaun&password =123
  8.     post:请求会放在请求体里
  9.  
  10. 关于 url的内容
  11.     url: https://www.baidu.com(协议：域名（也是ip+端口))
  12.     url: http:127.0.0.1:8800/blog/addBlog（协议：ip:端口/）
  13.     url: http:127.0.0.1:8800/blog/addBlog？username = yuan
  14.  
  15.     http:协议
  16.     127.0.0.1:8800：ip地址与端口
  17.     blog/addBlog：url的路径（path）
  18.     username = yuan:get请求数据
  19.  
  20. 请求协议：
  21.     浏览器发给服务器（get请求,post请求）
  22.     格式：
  23.         请求首行
  24.         请求头：就是一组组键值对
  25.         换行 \n,\n\r
  26.         请求数据：有两种方式
  27.         if get :
  28.             url?data
  29.         if post :
  30.             请求数据
  31.  
  32.         get请求：安全性差，数据量有限（当设计到查询的时候会用到get请求）
  33.         那些是get请求（一般都是查询数据库操作）：
  34.             1.url访问server端
  35.             2.超链接访问，即a标签
  36.         post请求：相对于get安全点，，但是没有绝对的安全（修删改可以用post）
  37.  
  38. 相应协议：

表单元素

基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。 
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息

<input>系列标签

  1. '''
  2. <> 表单类型
  3.  
  4. type:        text 文本输入框
  5.  
  6.              password 密码输入框
  7.  
  8.              radio 单选框
  9.  
  10.              checkbox 多选框  
  11.  
  12.              submit 提交按钮            
  13.  
  14.              button 按钮(需要配合js使用.) button和submit的区别？
  15.  
  16.              file 提交文件：form表单需要加上属性enctype="multipart/form-data" 
  17.  
  18.             上传文件注意两点：
  19. 请求方式必须是post
  20. enctype="multipart/form-data"
  21.  
  22.  <> 表单属性
  23.  
  24.  name:    表单提交项的键.
  25.  
  26.            注意和id属性的区别：name属性是和服务器通信时使用的名称；
  27.            而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的
  28.  
  29. value:    表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
  30.  
  31.                 type="button", "reset", "submit" - 定义按钮上的显示的文本
  32.  
  33.                 type="text", "password", "hidden" - 定义输入字段的初始值
  34.  
  35.                 type="checkbox", "radio", "image" - 定义与输入相关联的值
  36.  
  37. checked:  radio 和 checkbox 默认被选中
  38.  
  39. readonly: 只读. text 和 password
  40.  
  41. disabled: 对所用input都好使.
  42.  
  43. '''

select标签

  1. '''
  2.  <select> 下拉选标签属性
  3.           name:表单提交项的键.
  4.           size：选项个数
  5.           multiple：multiple
  6.                  <optgroup>为每一项加上分组
  7.                  <option> 下拉选中的每一项 属性：
  8.                        value:表单提交项的值.
  9.                        selected: selected下拉选默认被选中
  10.  
  11. '''

<textarea> 多行文本框

  1. ‘’''
  2.  
  3. <form id="form1" name="form1" method="post" action="">
  4.         <textarea cols=“宽度” rows=“高度” name=“名称”>
  5.                    默认内容
  6.         </textarea>
  7. </form>
  8.  
  9. '''

<label>标签

定义：<label> 标签为 input 元素定义标注（标记）。
说明：
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

  1. '''
  2.  
  3. <form method="post" action="">
  4.  
  5.         <label for=“username”>用户名</label>
  6.         <input type=“text” name=“username” id=“username” size=“20” />
  7. </form>
  8.  
  9. '''

<fieldset>标签

  1. '''
  2.  
  3. <fieldset>
  4.     <legend>登录吧</legend>
  5.     <input type="text">
  6. </fieldset>
  7.  
  8. '''

实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>注册页面</title>
  6. </head>
  7. <body>
  8. <h3>注册页面</h3>
  9. <!--action放的是ip地址和端口-->
  10. <!--method放的是请求方式-->
  11. <form action="" method="post">
  12.     <hr size="5" color="red">表单中input系列
  13.     <label for="c1"> <!--label标签就是把下面的姓名关联起来-->
  14.          <p>姓名：<input type="text" name="username" id="c1"></p>
  15.     </label>
  16.     <!--#当你不输入的时候有个默认的value值-->
  17.     <p>密码：<input type="password" name="password" value="123"></p>
  18.     <!--单选框ridio-->
  19.     <p>性别：<input type="radio" name = gender value="male">男：<input type="radio" name="gender" value="female">女</p>
  20.     <!--复选框checkbox-->
  21.     <p>爱好：<input type="checkbox" name="hobby" value="basketball">篮球<input type="checkbox" name="hobby" value="football">足球<input type="checkbox" name="hobby" value="sport">运动</p>
  22.     <!--文件-->
  23.     <p>头像：<input type="file" name="fileobj"></p>
  24.     <hr size="5" color="red">上面的value和下面的value是不一样的，上面的是发送请求的，下面的是修改值的
  25.     <!--重置-->
  26.     <p><input type="reset" value="reset"></p>
  27.      <!--其实是submit按钮把数据提交到action指定的地址了-->
  28.     <p><input type="submit"></p>
  29.     <!--空按钮  当你输入值才有内容-->
  30.     <!--onclick：鼠标点击事件-->
  31.     <p><input type="button" value="按钮" onclick="alert('确定')"></p>
  32.     <!--onmouseover：鼠标指到上面就触发-->
  33.     <p><input type="button" value="按钮" onmouseover="alert('确定')"></p>
  34.     <!--隐藏：不想让用户看见-->
  35.     <p><input type="hidden" name="sss" value="sds"></p>
  36.     <!--文本域-->
  37.     <p>个人简历<br>
  38.         <textarea name="selfinfo" cols="30" rows="10"></textarea>
  39.     </p>
  40.     <fieldset>海燕啊啊啊啊啊啊啊</fieldset>
  41.     <!--下拉框-->
  42.     <hr size="5" color="red">表单中select系列
  43.     <select name="provice" size="5"  multiple="multiple" >
  44.         selected设置默认选择。如果select里有multiple属性，那么可以在option里面设置多个selected
  45.         <option value="hebei" selected="selected">甘肃省</option>
  46.         <option value="henan" selected="selected">河南省</option>
  47.         <option value="hebei">湖北省</option>
  48.         <option value="shanxi">陕西省</option>
  49.     </select>
  50.     <fieldset>
  51.         <legend>登录吧</legend>
  52.         <input type="text">
  53.     </fieldset>
  54.  
  55. </form>
  56. <!--以键值对的形式发过去{"":"haiyan","":"123","gender":"male","hobby":["basketball","football"],"fileobj":"fileobj"}-->
  57. <!--如果没有name属性，你的数据是发不过去的-->
  58. <!--name:键名-->
  59. </body>
  60. </html>

2.div和span标签

<div></div> ： <div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span></span>： <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.

块级元素与行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

3.图片标签img

  1. src: 要显示图片的路径.
  2.  
  3. alt: 图片没有加载成功时的提示.
  4.  
  5. title: 鼠标悬浮时的提示信息.
  6.  
  7. width: 图片的宽
  8.  
  9. height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
  10.  
  11. '''

4.列表标签

  1. <ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
  2.  
  3. <ol>: 有序列表
  4.          <li>:列表中的每一项.
  5.  
  6. <dl>  定义列表
  7.  
  8.          <dt> 列表标题
  9.          <dd> 列表项
  10.  
  11. '''

实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--有序列表-- order list-->
  9. <!--默认是1,2,3,4有序，如果加type就会以你指定的有序-->
  10. <ol type="a">
  11.     <li>haha</li>
  12.     <li>haha</li>
  13.     <li>haha</li>
  14.     <li>haha</li>
  15.     <li>haha</li>
  16. </ol>
  17. <!--无序列表-->
  18. <ul>
  19.     <li>鸟</li>
  20.     <li>鸟</li>
  21.     <li>鸟</li>
  22.     <!--实心圆（默认是实心圆）-->
  23.     <li type="disc">鸟</li>
  24.     <!--空心圆-->
  25.     <li type="circle">鸟</li>
  26.     <!--方形-->
  27.     <li type="square">鸟</li>
  28. </ul>
  29. <!--定义列表-->
  30. <!--define liset-->
  31. <dl>
  32.     <!--定义的标题内容  define title-->
  33.     <dt>河北省</dt>
  34.     <!--内容-->
  35.     <dd>石家庄</dd>
  36.     <dd>天津</dd>
  37.     <dd>雄安</dd>
  38. </dl>
  39. </body>
  40. </html>

运行截图

html 之表单，div标签等。。。。。。。的更多相关文章

  1. web（四）html表单类标签

    表单类标签 操作者用于输入信息,并将信息提交给服务器的标签集合. 表单标签介绍 form标签:表单元素(其余标签)标签的容器标签 input标签:用于用户信息输入的标签. button标签:按钮标签. ...

  2. 12种炫酷HTML5 SVG和CSS3表单浮动标签特效

    这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...

  3. HTML表单提交标签

    <form>表单提交标签,设置提交范围 有name属性才能被提交 action:提交的地址url method:提交方式 get方式(默认):会将参数拼接在连接后,有大小限制(4k) po ...

  4. 前端开发-4-HTML-table&form&表单控制 标签

    1.table标签 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=" ...

  5. 解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题

    注册表单部分代码如下: <form id="registForm" class="form-horizontal" action="${page ...

  6. HTML 和 form 表单常用标签

    HTML和CSS 常用标签: p:段落,自动换行 span:和div类似,但是默认不换行 br:换行 hr:分割线 h1-h6:标题标签 a:超链接 瞄点:通过给a链接设置#XX作为链接,给需要链接的 ...

  7. 初学HTML 表单交互标签

    表单标签在网站中主要负责的是进行与用户间的交互, 如果没有了交互, 那么网站就只是一个展示, 会死气沉沉的. <form>表单标签 <form>表单标签可以把浏览者(也就是我们 ...

  8. 表单相关标签之input标签

    用于搜集用户信息. <input type="text" name="fname" /> 标签属性 type 规定 input 元素的类型.输入字段 ...

  9. 表单相关标签之form标签

    表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含 menus.textarea.fieldset.legend 和 label 元素以及其它块级元素 表单用 ...

  10. html表单相关标签及属性

    1.<form>标签 定义整体的表单区域 action属性 定义表单数据提交地址 method属性 定义表单提交的方式,一般有“get”方式和“post”方式 2.<label> ...

随机推荐

  1. 【报错】java.lang.ClassNotFoundException: org.apache.ibatis.session.SqlSession

    报错 java.lang.ClassNotFoundException: org.apache.ibatis.session.SqlSession 或者 java.lang.ClassNotFound ...

  2. Flask图书管管理表

    后端的读写 from flask import Flask,render_template,request from flask_sqlalchemy import SQLAlchemy #导入时间模 ...

  3. WIN10 困扰多时的屏幕亮度 终于可以调节了-完美 -更新2018年2月28日

    总结:很多问题是自己认知不够造成的,  -- 问题解决在  修复经历二,可直接跳过去看  修复经历二. 首先看你屏幕亮度是集成还是独立显卡决定的(一般是集成),所以下面 修复经历一折腾独立显卡驱动没什 ...

  4. 2013传智播客视频--.ppt,.pptx,.doc,.docx.目录

    \!-- JQ03-JQ事件动画\.1版JS+JQ PPT\00JsDom编程01_邹华栋.docx; \!-- JQ03-JQ事件动画\.1版JS+JQ PPT\00JsDom编程01_邹华栋.pp ...

  5. DeepLearning.ai-Week4-Deep Learning & Art: Neural Style Transfer

    1 - Task Implement the neural style transfer algorithm Generate novel artistic images using your alg ...

  6. Java的Fork/Join任务

    当我们需要执行大量的小任务时,有经验的Java开发人员都会采用线程池来高效执行这些小任务.然而,有一种任务,例如,对超过1000万个元素的数组进行排序,这种任务本身可以并发执行,但如何拆解成小任务需要 ...

  7. [转] Torch中实现mini-batch RNN

    工作中需要把一个SGD的LSTM改造成mini-batch的LSTM, 两篇比较有用的博文,转载mark https://zhuanlan.zhihu.com/p/34418001 http://ww ...

  8. 通过python脚本和zabbix配合监控zookeeper的节点数

    通过python脚本和zabbix配合监控zookeeper的节点数 需求描述: 在日常zabbix监控zookeeper的时候,无法通过shell来获取zookeeper的具体节点信息,没有开放具体 ...

  9. OpenStack实践系列③镜像服务Glance

    OpenStack实践系列③镜像服务Glance 3.5 Glance部署 修改glance-api和glance-registry的配置文件,同步数据库 [root@node1 ~]# vim /e ...

  10. mybatis：在springboot中的配置

    ## Mybatis 配置 mybatis.type-aliases-package=com.xfind.core.entity.xianyu mybatis.mapper-locations=cla ...