表单的工作原理

简单来说就是客户在浏览器输入信息之后，浏览器将用户在表单中的数据进行打包发送给服务器，服务器接收到之后进行处理，如下图

语法

<form>

    表单元素
</form>

form标签的属性

常用的表单元素以下这些

<input />    表单输入标签

<select >    菜单和列表标签

<option >    菜单和列表项目标签

<textarea >  文字域标签

<optgroup>   菜单和列表项目分组标签

input标签

语法

<input type="类型属性" name="名称" ....  />

常用的type的类型属性都有

text        文字域

password    密码域

file        文件域

checkbox    复选域

radio       单选域

button      按钮

submmit     提交按钮

reset       重置按钮

hidden      隐藏域

image       图像域

写一个简单的用户名密码和提交按钮

<!DOCTYPE html>

<html lang="en">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <title>表单</title>

</head>

<body>

    <form>

        姓名:<input type="text" name="userName" />

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

        <input type="submit" />

    </form>

</body>

</html>

打开上面的页面输入密码，发现密码是密文显示，我们见过，密码框后面有个小眼睛，点击之后就变成了明文，其实很简单，只是把type的属性password换成了text，后面学到js的时候，就能很容易的做出来这种效果

单行文本域的属性

name          文字域的名称

maxlength     指用户输入的最大字符长度

size          指定文本框的宽度，默认20个字符

value         指定文本框内的默认值

placeholder   规定用户填写输入字段的提示，文本框内浅灰色显示

完成以下的表单

<!DOCTYPE html>

<html lang="en">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <title>表单</title>

</head>

<body>

<h1 align="center">表单提交</h1>

<hr color="#336699">

    <form>

        <table align="center">

            <tr>

                <td>姓名:</td>

                <td><input type="text" name="userName" size="25" maxlength="6" placeholder="请输入姓名" /></td>

            </tr>

            <tr>

                <td>邮箱:</td>

                <td><input type="text" name="email" value="qq.com"/></td>

            </tr>

            <tr>

                <td>密码:</td>

                <td><input type="password" placeholder="请输入密码" /></td>

            </tr>

            <tr>

                <td>确认密码:</td>

                <td><input type="password" placeholder="请再次输入密码" /></td>

            </tr>

            <tr>

                <td>上传文件:</td>

                <td><input type="file" name="upFile" /></td>

            </tr>

            <tr>

                <td>性别:</td>

                <td>

                    <!-- name值相同才是单选，会将选中的value值提交到服务器，有checked的是默认选中的-->

                    男<input type="radio" name="sex" value="man"  checked/>

                    女<input type="radio" name="sex" value="woman" />

                </td>

            </tr>

            <tr>

                <td>爱好:</td>

                <td>

                    <!--复选框的name最好是相同（方便区分是哪组复选框），当然不同也可以，value是将选中的复选框提交给服务器的-->

                    唱歌<input type="checkbox" name="dx" value="sing"/>

                    跳舞<input type="checkbox" name="dx" value="dance"/>

                    读书<input type="checkbox" name="dx" value="read"/>

                </td>

            </tr>

            <tr>

                <td></td>

                <td>

                    <!--button主要配置js来完成提交表单数据的功能-->

                    <input type="submit" name="sub" value="点我"/>

                    <input type="button" name="but" value="来点我" />

                    <input type="reset" name="res" value="reset" />

                </td>

            </tr>

        </table>

    </form>

</body>

</html>

图像域

图像域是做什么的呢？我们发现上面的提交按钮都非常的丑陋，如果可以换一张 漂亮的图片也实现提交的功能，那多好呢，这时候就要用到图像域了

语法

<input type="image" name="..." src="data:imageurl" />

隐藏域

如果我们想往服务器上发送一些东西，但是不想让用户看到，这时候就要用到隐藏域了

语法

<input type="hidden" name="..." value="提交到服务器的信息">

下拉菜单和列表选项

语法

<select>

    <option value="提交服务器的值">内容</option>

    <option value="提交服务器的值">内容</option>

    <option value="提交服务器的值">内容</option>

</select>
<!DOCTYPE html>

<html lang="en">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

    <form>

      <select>

<!--          value是选中之后提交到服务器的值-->

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

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

          <option value="zj">浙江</option>

          <option value="gs">甘肃</option>

          <option value="lz">兰州</option>

          <option value="ln">陇南</option>

          <option value="am">澳门</option>

          <option value="xg">香港</option>

      </select>

    </form>

</body>

</html>

上面的代码运行后，发现只能选择一个，而且页面只显示了一个选项，如果想选多项就要了解下select的属性了

select的属性

name      设置下拉菜单和列表的名称

multiple  设置可选择多个选项

size      设置列表中可见选项的数目

option的属性

selected    设置选项默认选中状态

value       定义送往服务器的选项值
<!DOCTYPE html>

<html lang="en">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

    <form>

      <select>

<!--          value是选中之后提交到服务器的值-->

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

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

          <option value="zj">浙江</option>

          <option value="gs">甘肃</option>

          <option value="lz">兰州</option>

          <option value="ln" selected>陇南</option>

          <option value="am">澳门</option>

          <option value="xg">香港</option>

      </select>

        <hr>

      <select size="4" multiple>

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

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

          <option value="zj">浙江</option>

          <option value="gs">甘肃</option>

          <option value="lz">兰州</option>

          <option value="ln">陇南</option>

          <option value="am">澳门</option>

          <option value="xg">香港</option>

      </select>

    </form>

</body>

</html>

下拉分组

上面的几种方法已经可以满足我们的大多数要求，但是如果我们想要达到下面的效果怎么办

这时候就要用到分组optgroup了

语法

<select size="8" multiple>

      <optgroup label="分组名">

          <option value="...">内容</option>

          <option value="...">内容</option>

          <option value="...">内容</option>

          <option value="...">内容</option>

      </optgroup>

      <optgroup label="分组名">

          <option value="...">内容</option>

          <option value="...">内容</option>

          <option value="...">内容</option>

          <option value="...">内容</option>

      </optgroup>

</select>
<!DOCTYPE html>

<html lang="en">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

    <form>

      <select size="8" multiple>

          <optgroup label="中国">

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

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

              <option value="zj">浙江</option>

              <option value="gs">重庆</option>

          </optgroup>

          <optgroup label="甘肃">

              <option value="lz">兰州</option>

              <option value="ln">陇南</option>

              <option value="am">陇西</option>

              <option value="xg">陇北</option>

          </optgroup>

      </select>

    </form>

</body>

</html>

多行文本域textarea

有时候我们要在文本框里输入大段的文字怎么办，这时候input已经不能满足我们的需求了，我们就要使用textarea

语法

<textarea name="..." rows="..." cols="...">默认值</textarea>
<!DOCTYPE html>

<html lang="en">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

    <form>

        <textarea>我说你</textarea>

    </form>

</body>

</html>

点我

上面的代码是没有任何属性时的效果，大多数情况下我们都要给添加下属性

textera的属性

name           设置文本区的名称

placeholder    设置文本框内的提示，浅灰色

rows           设置文本框的可见行数

cols           设置文本框的可见宽度

给上面的代码添加上属性

<!DOCTYPE html>

<html lang="en">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

    <form>

        <textarea placeholder="请输入介绍" rows="6" cols="80"></textarea>

    </form>

</body>

</html>

HTML基础（五）表单的更多相关文章

  1. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  2. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  3. [jQuery学习系列五 ]5-Jquery学习五-表单验证

    前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...

  4. 【ASP.NET 基础】表单和控件

    1.HTML表单的提交方式 对于一个普通HTML表单来说,它有两个重要的属性:action 和 method.action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者 ...

  5. 玩转Django2.0---Django笔记建站基础七(表单与模型)

    第七章 表单与模型 表单是搜集用户数据信息的各种表单元素的集合,作用是实现网页上的数据交互,用户在网站输入信息,然后提交到网站服务器端进行处理(如数据录入和用户登录.注册等). 用户表单是web开发的 ...

  6. HTML基础2 表单和框架

    表单: <form id="" name="" method="post/get" action"负责处理的服务端" ...

  7. html基础之 表单提交方法

    最普通最常用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” action=”#"> <input ty ...

  8. BootStrap 智能表单系列 五 表单依赖插件处理

    这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...

  9. 【HTML】 HTML基础知识 表单

    html 表单 表单的标签是<form>,用于给网站的后台提交数据.提交的数据格式原本是什么样不太清楚,以python的flask框架来看,我从表单中得到的数据是一个字典(flask.re ...

  10. 微信小程序基础之表单Form的使用

    表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的"switch","i ...

随机推荐

  1. JAVA基础--面向对象09

    一.适配器设计模式 1.适配器模式 adapter:适配器: 电脑电源适配器:作用:转换电压,将不符合使用要求的220伏特的市电转换成我们电脑可以使用的电压: 适配器:将不符合使用要求的东西转换成符合 ...

  2. poj3069【贪心，水】

    妈蛋,题意看错-看了挑战时被标记的点还是给出的点,瞎搞了半个多小时... = =都想气的扔进水题系列了 #include <iostream> #include <cstdio> ...

  3. PTA 2-1 列出连通集【DFS+BFS基础】

    给定一个有N个顶点和E条边的无向图,请用DFS和BFS分别列出其所有的连通集.假设顶点从0到N−1编号.进行搜索时,假设我们总是从编号最小的顶点出发,按编号递增的顺序访问邻接点. 输入格式: 输入第1 ...

  4. hdoj1097

    好久没有遇到过这样的题,似乎记得以前完全就是靠规律啊什么的.... 然后刚刚看到,这不就是快速幂取膜就好了嘛- #include <stdio.h> #include <string ...

  5. poj 3648 Wedding【2-SAT+tarjan+拓扑】

    看错题*n,注意是输出新娘这边的-- 按2-SAT规则连互斥的边,然后注意连一条(1,1+n)表示新娘必选 然后输出color[belong[i]]==color[belong[1+n(新娘)]]的点 ...

  6. loj#2541. 「PKUWC2018」猎人杀

    传送门 思路太清奇了-- 考虑容斥,即枚举至少有哪几个是在\(1\)号之后被杀的.设\(A=\sum_{i=1}^nw_i\),\(S\)为那几个在\(1\)号之后被杀的人的\(w\)之和.关于杀了人 ...

  7. (025)[系统故障]XP下禁止将串口设备识别成鼠标(转)

    很多人都遇到过这种问题:Windows XP启动时将一台连续发送数据的串口设备识别成串口鼠标,自动安装了串口鼠标驱动,而设备因此无法正常工作,而光标则无规律地到处跑.对此问题,Internet上的方法 ...

  8. [在读]HTML5程序设计（第二版）

    去年买的,看了30%不到,之后一直是搁置状态,内容还不错,确确实实纯粹讲H5的.

  9. Sublime3注册码和安装中文包

    1.Sublime3注册码 在工具栏Help中点击Enter license,粘贴下面一大串 —– BEGIN LICENSE —– Michael Barnes Single User Licens ...

  10. MySQL执行带out的存储过程

    CALL `sp_sys_get_code`(3,'sys_customer',@code); SELECT @code