HTML表单

表单的结构

表单的标签：<form> </form>

常用属性

Name , method(get,post), action(服务器的接收的页面如：reg.php), onsubmit=” return javascript函数”，enctype=”multipart/form-data”

Get (表单的默认传值方式)

通过Get方式传值：名称(name)和值(name的值)以“？”的跟在action处理页面的后面

如果有多个名称和值，用“&”号连接

这个方式传值：名称和值都在地址栏中显示(不安全)

地址栏的空间（容量有限）<2KB

一般用在要求（安全方面）不高，并且一些简单的数据。

通过用在查询

Post

不在地址栏中显示

相对安全

一般用在数据库方面，修改，删除

在上传一些复杂的数据的时候用post

如：上传图片，文件等。

注意：在上传文件时候，编码方式一定选择：enctype=”multipart/form-data”

大小没有限制

Enctype=”” 表单的编码方式两种：

Application/x-www-form-urlencoded(默认)

enctype=”multipart/form-data”

表单的元素

分类：input  type=”text,password,radio,checkbox,button,submit reset image,hidden, file”

type=”text”单行文本域

Type=”password”密码域

Type=”radio” 单选，外观是一个圆圈

Type=”Checkbox” 复选，外观是方框

Type=”button” 普通按钮

Type=”submit ”  提交按钮

Type=”reset ” 重置按钮

Type=”image” 图片按钮，功能和submit一样,对表单具有提交的功能。

Type=”hidden” 隐藏域

Type=”file” 上传文件域

Select option 下拉列表

<select name=”fruit” >

<option value=”A”>水果A</optin>

<option value=”B”>水果B</optin>

<option value=”C”>水果C</optin>

</select>

Textarea 多行文本域

=========================================================================

<input type=”text” name=”username” size=”20” maxlength=”30” />

<input type=”password” name=”pwdddd” size=”20” maxlength=”30” />

表单的提交

<input type=”submit” value=”提交” name=”submit” />

<input type=”reset” value=”重写”  />

<input type=”radio” name=” 是一组的相同”  value=”不能少”  ID＝“” />

Value是传到服务器上的值。

为了增加体验：<label for=”表单元素的ID”></label>

注意：ID在当前网页中只名称是唯一性。不能重复

默认选项：checked=”checked”

单选 checked

复选

<input type=”checkbox” name=”建议一样” value=””  />

<input type=”checkbox” name=”建议一样” value=””  checked=”checked” />

提交按钮

<input type=”submit” name=”submit” value=”提交” />

重置 reset

<input type=”reset”  value=”重写” />

图片按钮 src

<input type=”image” src=””  name=”img” />

普通按钮 button

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

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

<input type="image" src="img.jpg" name="img" />

<input type="button" value="普通按钮" onclick="alert('hello world')" />

隐藏域 hidden

<input type=”hidden” name=”” />

通常传值，没有必要让用户知道的信息

上传文件域 file

<input type=”file” name=”” />

表单form中编码类型一定选择：enctype=”multipart/form-data”

下拉列表，name multiple size

<select name=”adress”>

<option value=”值传到服务器”>河北</option>

<option value=”值传到服务器”>河南</option>

<option value=”值传到服务器”>上海</option>

<option value="heibei" selected="selected">河北</option>

默认选择：selected=”selected”

</select>

多选下拉列表

Option 分组下拉列表

文本区域 textarea cols rows name

<textarea name="sef" cols="50" rows="5">

请请请

</textarea>

相关的元素分组filedset legend

案例代码如下

<body>  <form name="form1" method="post" action="reg.php">  <fieldset>  <legend>本站用户注册信息表</legend>   <table width="400" align="center" border="1">   <caption>会员注册信息</caption>  <tr>   <td>用户名：</td>   <td><input type="text" name="username"  /></td>  </tr>  <tr>   <td>密码：</td>   <td><input type="password" name="userpwd" /></td>  </tr>  <tr>   <td>性别：</td>   <td>   <input type="radio" name="sex" value="boy"  id="boy"  /><label for="boy">男</label>   <input type="radio" name="sex" value="girl" checked="checked"/>女   <input type="radio" name="sex" value="sec" id="tt" /><label for="tt">保密</label>   </td>  </tr>  <tr>   <td>爱好</td>   <td>   <input type="checkbox" name="hobby" value="reading" />阅读   <input type="checkbox" name="hobby" value="dancing" checked="checked" />跳舞   <input type="checkbox" name="hobby" value="sing" id="sing" /><label for="sing">唱歌</label>      </td>  </tr>  <tr>  <td>请上传您的照片</td>  <td>  <input type="file" name="photo" />  </td>  </tr>   <tr>    <td>籍贯A</td>    <td>      <select name="jiguan">       <option value="bejing">========请选择===========</option>       <option value="heibei" selected="selected">河北</option>       <option value="shanghai">上海</option>      </select>    </td>    </tr>   <tr>    <td>水果</td>    <td>      <select name="address">       <optgroup label="北京">        <option value="apple">海淀</option>        <option value="banana">东城</option>        <option value="pear">西城</option>        <option value="pear">朝阳</option>       </optgroup>

<optgroup label="河北">        <option value="apple">保定</option>        <option value="banana">石家庄</option>        <option value="pear">廊坊</option>        <option value="pear">唐山</option>       </optgroup>

</select>    </td>    </tr>   <tr>    <td>籍贯B</td>    <td>      <select name="fruit" multiple="multiple" size="3">       <option value="apple">苹果</option>       <option value="banana">香蕉</option>       <option value="pear">梨</option>       <option value="orange" selected="selected">桔子</option>       <option value="watermelon">西瓜</option>       <option value="strawberry">草莓</option>      </select>    </td>    </tr>   <tr> <td>个人评价</td> <td>   <textarea name="sef" cols="30" rows="5">   请请请   </textarea> </td>   </tr>  <tr>   <td colspan="2" align="center">   <input type="reset" value="重置" />    <input type="submit" value="注册" name="submit" />   <input type="image" src="img.jpg" name="img" />   <input type="button" value="普通按钮" onclick="alert('hello world')" />   </td>  </tr>   </table>  </fieldset>   </form>  </body>

HTNL表单详解的更多相关文章

  1. Django学习笔记之Django Form表单详解

    知识预览 构建一个表单 在Django 中构建一个表单 Django Form 类详解 使用表单模板 回到顶部 构建一个表单 假设你想在你的网站上创建一个简单的表单,以获得用户的名字.你需要类似这样的 ...

  2. Django之form表单详解

    构建一个表单 假设你想在你的网站上创建一个简单的表单,以获得用户的名字.你需要类似这样的模板: <form action="/your-name/" method=" ...

  3. AngularJS开发指南6：AngularJS表单详解

    表单控件(input, select, textarea )是用来获取用户输入的.表单则是一组有联系的表单控件的集合. 用户能通过表单和表单控件提供验证的服务,知道自己的输入是否合法.这样能让用户交互 ...

  4. vue表单详解——小白速会

    一.基本用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定. 但 v-model 本质上不过是语法糖.它负责监听用户的 ...

  5. form表单详解

    form表单 form是一个复杂的系统标签,其内部又可包含很多的一些输入标签 例如input 输入文本标签  checkbox 多选标签等等 form表单有几个属性我们需要注意一下 1:action属 ...

  6. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  7. HTTP头部POST表单详解

    2 POST /hello/checkUser.html?opt=xxx HTTP/1.1 方法的声明,Get,Post,Delete等 3 Accept: */* 4 Referer: http:/ ...

  8. from表单详解

  9. oracle表分区详解

    原文来自:http://www.cnblogs.com/leiOOlei/archive/2012/06/08/2541306.html oracle表分区详解 从以下几个方面来整理关于分区表的概念及 ...

随机推荐

  1. PPT分享 | 怎么在区块链上保护隐私？

    艾伯特AI人工智能(公众号:aibbtcom)按: (编者按:在12月3日的亚太区以太坊社区培训和交流Meetup深圳站上,Vitalik作了<怎么在区块链上保护隐私>的演讲,谈到了区块链 ...

  2. Django基本命令

    下载Django pip3 install django #默认下载最新版 pip3 install django==1.11.1 #手动选择版本 创建Django项目 格式:django-admin ...

  3. 一些常见的shell命令和git命令

    shell命令: pwd : (Print Working Directory) 查看当前目录 cd (Change Directory) 切换目录,如 cd /etc ./当前目录  ../上级目录 ...

  4. IMLite轻量级即时通信工具开发指南

    花了一周时间开发了一个简单的即时通信工具,勉强算是程序原型.现在我把开发流程和一些个人的想法记录下来.本文首先介绍程序架构和通信接口,之后会聚焦到服务器的信号槽设计原则,接下来将解释有关TCP通信的粘 ...

  5. 前端的UI设计与交互之设计原则篇

    1.亲密性 a)纵向间距示例这三种规格分别为:8px(小号间距).16px(中号间距).24px(大号间距). b)在这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层 ...

  6. Docker + webpack 打包前端项目

    码云代码地址: https://gitee.com/caonimashi/docker_deployment_front_end    构建基础镜像: 1.下载一个 Apline Linux 操作系统 ...

  7. 打印机驱动冲突和端口异常：win10更新部分补丁后，打印机本地连接（连接打印机的主机）可以打印，其他共享网络中的电脑可以连接到打印机，但不能打印——解决方案

    一.问题描述: 1.A(WIN10系统)表示连接打印机的电脑,P表示打印机(型号:惠普127M),B(WIN7系统)表示局域网中的电脑 2.A升级后部分补丁后,A可以使用打印机P打印文件,B显示可以连 ...

  8. JWT 简介

    JWT是一种用于双方之间传递安全信息的简洁的.URL安全的表述性声明规范.JWT作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以Json对象的形式安全的传递信息 ...

  9. java中使用ReentrantLock锁中的Condition实现三个线程之间通信，交替输出信息

    本文直接附上源代码,如下是自己写的一个例子 面试题需求: 使用Condition来实现 三个线程 线程1 线程2 线程3 三个交替输出 [按照 线程1(main)-->线程2-->线程3] ...

  10. 视图和URL配置

    视图和URL配置 实验简介 上一章里我们介绍了如何创建一个Django项目并启动Django的开发服务器.本章你将学到用Django创建动态网页的基本知识. 同时,也教会大家怎么在本地机器上建立一个独 ...