Day3  Form表单

一.form表单 :提交数据
    表单在网页中主要负责数据采集功能,它用<form>标签定义。
    用户输入的信息都要包含在form标签中,点击提交后,<form>和</form>里面包含的数据将被提交到服务器或者电子邮件里。
    所有的用户输入内容的地方都用表单来写,如登录注册、搜索框.从而能采集客户端信息,使网页具有交互功能.

表单是由窗体和控件组成.能容纳各种各样的控件.
   (form之间不能相互嵌套,一个页面可以有多个form表单)

二. 一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮。

1.表单标签:(指<form>标签本身,它是一个包含表单元素的区域,使用<form></form>定义)

<form action="url" method="get|post" name="myform" ></form>  
      -name:表单提交时的名称
      -action:提交到的地址
      -method:提交方式,默认为get,  post

post和get区别:  (提交项目时用post)

  • 数据提交方式,get把提交的数据url可以看到,post看不到
  • get一般用于提交少量数据,post用来提交大量数据
  • get最多提交2Kb数据,post理论上没有限制
  • get提交的数据在浏览器历史记录中,安全性不好

2.表单按钮  :(用来提交<form>表单中的所有信息到服务器)
 
1)单行文本框    <input type="text" >默认值是type="text"

  用户名: <input type="text"  name="userName"/>         (name为当前input的名称)                           

2)密码框    <input type="password"/> 

密码:<input type="password" name="psd"/> 

3)单选按钮    <input type="radio" name=””/>

性别:<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
<input type="radio" name="sex"/>人妖 

                (name属性名称相同划分为一组)  

4)复选框    <input type="checkbox"/>

   爱好:<input type="checkbox"/>唱歌
<input type="checkbox"/>睡觉
<input type="checkbox"/>看电影
<input type="checkbox"/>王者
 

    (checked设置控件初始状态是否被选中)

5)隐藏域    <input type="hidden"/>  (不在页面中展示)

6)文件上传    <input type="file"/>
        (当表单提交文件时  method  属性值要为  post )
        form要加  enctype="multipart/form-data" 属性,这个属性说明了我们的文件以  二进制方式传输文件,因为我们计算机本身最底层都是以二进制来显示、传输。

<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="file1"/>
</form>

7)下拉框  <select>  标签

下拉框:
<select>
<optgroup value="1" name="beijing">北京</optgroup>      ( value指定控件初始值 )
<option value="1" name="shanghai">上海</option>        ( size规定下拉列表中可见选项的数目[显示几行])
<option value="1">深圳</option>                 ( disabled规定禁用下拉列表框 )
<option value="1">广州</option>                 ( selected用来指定默认的选项 )
</select>
下拉列表框续:
<select name="" id="">
<optgroup label="北京">
<option value="1">东城区</option>
<option value="2">西城区</option>
<option value="3">海淀区</option>
</optgroup>
<optgroup label="河北省">
<option value="4">石家庄</option>
<option value="5">保定市</option>
<option value="6">沧州市</option>
</optgroup>
</select>      

    

8)多行文本  <textarea cols="10" row="5"></textarea>  
            (汉字占10个字节,5个英文字节)

<textarea cols="30" row="10">  ( col:文字区块的宽度) ( row:文字区块的行数,即高度 )

9)提交按钮  <input type="submit"/>
        1)<input type="submit" value="提交"/>         <button>提交</button>

10)普通按钮<input type="button"/>   (没有任何功能)
        1)<input type="button" value="没有任何功能"/>
        2)<button type="button">没有任何功能的按钮</button>

11)重置按钮<input type="reset"/>

 1)<input type="reset" value="重置"/>  
        2)<button type="reset">重置</button>  

12)  <label></label> :(提升用户体验度,当点击内容,对应按钮生效 .  是input的描述,本身没有特殊效果)
    性别:<input type="radio" name="sex" id="man"/><label for="man">男</label>
      label的for属性和input的id属性名称一致,绑定,一般配合单选按钮,多选按钮使用.

13)<fieldset>元素集

   <fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>

 
3.表单域属性:
name=""  表单域的名称
value=""  当前值
checked   默认被选中,一般配合单选按钮和多选按钮使用
disabled  禁用
readonly  只读
selected   默认显示,配合option使用

select的属性:
size="number"  显示的行数
multiple   可以多选

*表单域和表单按钮都属于表单元素。

三.HTML新增type类型:
  1.邮箱

语法:<input type="email"/>    注意:输入的内容中必须包含"@","@"后面必须具有内容

2.网址

语法:<input type="url"/>    注意:输入的内容中必须包含"http://",后面必须有内容

3.搜索

语法:<input type="search"/>    功能描述:输入搜索关键字的文本框,后面多了一个"x"

4.数字
<input type="number"/> 
  属性:min:当前域能接受的最小值    
      max:当前域能接受的最大值
      step:决定了域所接受值递增或递减的步长,默认为1.

语法:<input type="number" min="0" max="30" step="5"/> (只能输入数字,后面有上下箭头)

5.颜色类型

语法:<input type="color"/>    功能描述:预定义的颜色拾取控件

6.电话:

语法:<input type="tel"/>    (pc端没有样式显示,移动端开发显示打电话界面,iOS就是苹果电话界面)

7.范围(滑块)

语法:<input type="range" min="0" max="100" step="20" value="20"/> (设置最小值0,最大值100,步长为20,当前值20)

8.日期,周,月

语法:<input type="date/week/month" />  

四.HTML新增属性  (没有等号"=""属性等于属性值)
    1.placeholder :默认提示  (颜色灰色)

语法:<input type="text" placeholder="请输入用户名"/>

2.multiple    eg:123@qq.com,111@136.com
作用:支持在一个域中输入多个值,逗号(英文状态下)隔开,一般配合邮箱和URL使用

语法:<input type="email" multiple/> 

   英文状态下逗号隔开

3.autofocus
作用:自动获取焦点   (一般给表单第一个input获取焦点)

语法:<input type="text" autofocus/>

4.required      (必填项)
作用:防止域为空提交表单时,防止用户什么都没写就提交

语法:<input type="text" required/>

5.minlength和 maxlength     (汉字,标点符号都算一个字符,)
作用:定制元素允许的最小字符数和最大字符数,可用于用户名,密码.

语法:<input type="text" minlength="6" maxlength="18"/>
( 输入用户名,最小长度为6,最大长度为18 )

6.min和max
作用:定制元素允许的最小数字和最大数字,一般配合number和range使用.

语法:<input type="number" min=”0” max=”100”/>

Day3 Form表单的更多相关文章

  1. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  2. Form 表单提交参数

    今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...

  3. form表单 ----在路上(15)

    form 表单就是将用户的信息提交到服务器,服务器会将信息存储活着根据信息查询数据进行增删改查,再将其返回给用户. 基本格式: <form action="" method ...

  4. form表单的字符串进行utf-8编码

    <form>表单有assept-charset属性.该属性规定字符的编码方式,默认是"unknown",与文档的字符集相同. 该属性除了Internet explore ...

  5. 细说 Form (表单)

    细说 Form (表单) Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net WebForms框架为了帮助 ...

  6. 通过form表单的形式下载文件。

    在项目中遇到问题,要求动态拼接uri下载文件.但是由于项目的安全拦截导致window.location.href 和 window.open等新建窗口的方法都不行. 无意间百度到了通过form表单来下 ...

  7. form 表单跨域提交

    <!DOCTYPE html><html> <head> <title>form 表单上传文件</title> <script src ...

  8. form表单的属性标签

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

  9. form表单的属性标签和练习

    form表单的标签 做一个如下图的form表单: 我们的代码如下: <body leftmargin="400px" topmargin="200px"& ...

随机推荐

  1. [转]关于TDD、BDD和DDD的一些看法

    在实际的项目中,我们可能随时面对各种不同的需求,它的各个方面的要素决定了我们所采用的开发模式. 比如,它的复杂度如何?所有的需求是否足够清晰?开发人员对相关的业务是否足够了解?项目的工期是否合理?种种 ...

  2. An error has occurred. See error log for more details. java.lang.NullPointerException

    今天重新新建一个eclipse的空间,就报了这么一个错误,百度找了很多,发现不对头,都不行.后来点开错误一看,原来是web.xml里面没有文件头造成的. 解决办法:只需要在web.xml文件里添加文件 ...

  3. EF core 学习 执行原生sql语句 之ExecuteReader 和ExecuteScalar

    通过ef core 源码分析 Microsoft.EntityFrameworkCore.Storage.RelationalCommandExtensions类中有相应的方法 为此得到相应的结果: ...

  4. 2019-5-1 maven学习笔记

    一.maven的好处 同样的项目使用maven工程来实现,由于不需要导入很多jar包,源码很小 原理:根据坐标到项目的仓库里查找需要的依赖 二.安装步骤 1.到http://maven.apache. ...

  5. hdu2067 小兔的棋盘

    小兔的棋盘 时间限制:1000/1000 MS(Java / Others)内存限制:32768/32768 K(Java / Others)总提交内容:13029接受的提交内容:6517 问题描述 ...

  6. Jenkins自动化CI CD流水线之1--介绍与安装

    第1章 大纲 CI/CD, DevOps介绍 Git安装与使用 Jenkins安装与使用 权限管理 参数化构建 Master-Slave 流水线(Pipeline) 邮件通知 应用案例 自动发布PHP ...

  7. C语言一些易混淆的概念

    ①数组指针和指针数组 1. 数组指针用于指向一个数组,数组名是数组首元素的地址(数组名为数组首元素类型且指向首元素的指针,如int array[5] ,array为指向array[0]的指针且类型为i ...

  8. ruby 更换源 + sass 安装

    gem sources -c #删除所有镜像地址 gem sources -a http://gems.ruby-china.com #添加ruby-china的镜像地址 原有的org域名更换变成co ...

  9. spring boot 入参方式

    方式: 1).直接写,如public User index2(String name) 2).@RequestParam 与直接写的区别是,可以写默认值. 3).@RequestBody 因为传入的是 ...

  10. java——利用生产者消费者模式思想实现简易版handler机制

    参考教程:http://www.sohu.com/a/237792762_659256 首先说一下这里面涉及到的线程: 1.mainLooper: 这个线程可以理解为消费者线程,里面运行了一个死循环, ...