表单基础摘要

<form id="" name="" method="post/get" action="负责处理的服务端">

id不可重复，name可重复，get提交有长度限制，并且编码后的内容在地址栏可见，

post提交没有长度限制，且编码后内容不可见。

</form>

1.文本输入

文本框<input type="txt" name="" id="" value="" />

密码框<input type="password" name="" id="" value="" />

文本域<textarea name="" id="" cols=""(字符多少) rows=""(几行高)></textarea>

隐藏域<input type="hidden" name="" id="" value="" />

2.按钮

提交按钮<input type="submit" name="" id="" disabled="disabled" value="" />点击后转到form内的提交服务器的地址

重置按钮<input type="reset" name="" id="" disabled="disabled" value="" />

普通按钮<input type="button" name="" id="" disabled="disabled" value="" />

图片按钮<input type="image" name="" id="" disabled="disabled" src="图片地址" />

disabled使按钮失效

enable使按钮可用

3.选择输入

单选按钮组<input type="radio" name="" checked="checked" value="" />

name的值用来分组，value的值看不见，提交给程序用的，checked设置默认选项。

复选框组<input type="checkbox" name="" checked="checked" value="" />

文件上传<input type="file" name="" id="" />

<lable for=""></lable>

lable标签为input元素定义标注。

lable元素不会向用户呈现任何特殊效果，不过，他为鼠标用户改进了可用性。如果您在lable元素内点击文本，就会触发此控件。

就是说，当用户选择该标签时，浏览器会 将焦点转到和标签相关的表单控件上。

lable标签的for属性应当与相关元素的id属性相同。

4.下拉列表框

<select name="" id="" size="" multiple="multiple">

--size为1时，为菜单；>1时，为列表。multiple为多选。

<option value="值">内容1</option>

<option value="值" selected="selected">内容2</option>

--selected,设为默认

<option value="值">内容3</option>

</select>

 

随堂练习

 <body>

         <form action="Form表单2.html" method="get">

             <input type="text"

                    name="uid"

                    placeholder="用户名/ID/手机号"

                    maxlength="2"

                    hidden="hidden"

                    />

             <br />

             <input type="password" name="pwd" /><br />

             <input id="man" checked type="radio" name="r1" value="1"/>

             <label for="man">男</label>

             <input id="woman" type="radio" name="r1" value="0"/>

             <label for="woman">女</label>

             <br />

             <input type="checkbox" checked="checked" value="1" name="c1" />

             <input type="checkbox" value="2" name="c2" />

             <br />

             <select name="area" size="7" multiple="multiple">

                 <option value="0533">山东</option>

                 <option value="010" selected="selected">北京</option>

             </select>

             <br />

             <input type="file" name="logo" />

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

             <input type="submit" value="提 交" />

             <input type="button" value="按 钮"/>

             <input type="image" src="img/1.jpg" width="100" height="30"/>

             <input type="hidden" name="xxx" value="yyy"/><br />

             <textarea></textarea>

         </form>

     </body>

0908期 HTML form表单的更多相关文章

  1. react引用antd的form表单

    引用form是第三方插件ant插件,官网网址:https://ant.design/.用到的antd的版本是@2.0.1.form(https://ant.design/components/form ...

  2. C#之Form表单认证

    原文地址: https://blog.csdn.net/chadcao/article/details/7859394 ASP.NET的安全认证,共有“Windows”.“Form”.“Passpor ...

  3. form表单验证-Javascript

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

  4. Form 表单提交参数

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

  5. form表单 ----在路上（15）

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

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

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

  7. 细说 Form (表单)

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

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

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

  9. form 表单跨域提交

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

随机推荐

  1. 解析xml节点属性及子节点内容

    xml样例 <microNearlyThreeYearsOverdueInfo subReportType="13204" subReportTypeCost="9 ...

  2. 解决SQL SERVER数据库备份时出现“操作系统错误5（拒绝访问）。BACKUP DATABASE 正在异常终止。”错误的解决办法

    SQL SERVER数据库进行备份时出现“操作系统错误5(拒绝访问).BACKUP DATABASE 正在异常终止.”错误.我们应该如何解决这个问题?小编今天为大家推荐一个解决办法. 一般备份文件选择 ...

  3. 编译安装pgbouncer-checking for OpenSSL... configure: error: not found

    花了一上午时间将pgbouncer的参数通读了一遍,对他有个大致的了解:1.配置分为连接池和pgbouncer两个部分[database]\[pgbouncer ].2.一条记录对应创建一个连接池,连 ...

  4. Eclipse Java EE IDE中jsp页面编码修改

    Eclipse Java EE IDE模板编码是ISO8859,肯定不是我们需要的,修改方法如下图: 依次点击:Window---->Preference---->Web---->J ...

  5. (三) ffmpeg filter学习-编写自己的filter

    目录 目录 什么是ffmpeg filter 如何使用ffmpeg filter 1 将输入的1920x1080缩小到960x540输出 2 为视频添加logo 3 去掉视频的logo 自己写一个过滤 ...

  6. 用css和php脚本来使得poscms的list标签顺利输出记录

    每次拿到前端给的页面,都会有意想不到的惊喜,因为他们给的页面总是不能很好地契合poscms的模板标签 输出规范,这时候就需要动点脑筋去解决问题了. 拿前两天拿到的一类(对,你没看错,是一类)页面来说吧 ...

  7. spring boot 教程（一） 构建我的第一个Spring boot

    Spring Boot特点 1. 创建独立的Spring应用程序 2. 嵌入的Tomcat,无需部署WAR文件 3. 简化Maven配置 4. 自动配置Spring 5. 提供生产就绪型功能,如指标, ...

  8. python sys.path.append()和sys.path.insert()

    python程序中使用 import XXX 时,python解析器会在当前目录.已安装和第三方模块中搜索 xxx,如果都搜索不到就会报错. 使用sys.path.append()方法可以临时添加搜索 ...

  9. quick2.2.6 问题记录

    1.luasocket 不能使用方式 用下面地址的文件替换文件重新编译 https://github.com/chukong/quick-cocos2d-x/blob/master/lib/cocos ...

  10. C++中atof函数的实现和atoi的实现

    在C++中有两个系统函数可以实现字符串转浮点型和字符串转整形,下面实现一下这两个函数. #include <iostream> #include <string> using ...