表单基础摘要

<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. 如何实现PLC与THINGWORX工业物联网平台对接

    物联网(Internet of Things),简称 IoT,对于制造商来说,是行业乃至世界范围内的一股变革浪潮.在我们设计和制造的产品中,将会不断嵌入各种软件.传感器和启用 IP 的连接功能.IDC ...

  2. 使用编译时注解简单实现类似 ButterKnife 的效果

    这篇文章是学习鸿洋前辈的 Android 如何编写基于编译时注解的项目 的笔记,用于记录我的学习收获. 读完本文你将了解: 什么是编译时注解 APT 编译时注解如何使用与编写 举个例子 思路 创建注解 ...

  3. MFMailComposeViewController发送邮件

    1.iPhone API已经提供了系统写邮件界面的接口,使用MFMailComposeViewController,用来显示界面. 2.项目中需要添加MessageUi.framework.头文件加入 ...

  4. redis常用配置参数解析

    本文主要总结一下redis常用的配置参数的用法: 以下参数决定redis运行方式,默认前台运行,修改为yes可以让redis以后台守护进程方式运行 daemonize no 以下参数指定redis的p ...

  5. crm 03--->销售页面及逻辑

    基本思路 销售  ------->使用的是customer表来操作 有两个页面: 未成交的客户 公共客户页面  ---  什么属于?  --> 三天未跟进,及十五天内未成交 url    ...

  6. linux中的网络基础

    ifconfig -a 查看所有网口ifconfig eth 查看具体网口 ifup ethoifdown etho 网卡配置文件/etc/sysconfig/networkk-scripts/ifc ...

  7. Django项目部署（阿里云）（2）--扩展

    新博客地址:http://muker.net/django-server-two.html 前面的只是最简单的部署,真实情况总是更复杂一点实际流程大概是这么操作的(我这种菜鸟的想法):本地写代码-&g ...

  8. AC自动机学习小结

    AC自动机 简要说明 \(AC\) 自动机,全称 \(Aho-Corasick\ automaton\) ,是一种有限状态自动机,应用于多模式串匹配.在 \(OI\) 中通常搭配 \(dp\) 食用. ...

  9. 《DSP using MATLAB》示例Example 6.12

    上代码: % x = -8:7 y = TwosComplement(x, 4) y = dec2bin(y, 4); disp(sprintf('%s', [y'; char(ones(1, 16) ...

  10. [BZOJ5073][Lydsy1710月赛]小A的咒语

    bzoj description 你有一个\(A\)串和\(B\)串,你需要判断是否可以在\(A\)串中拆出\(x\)个互不相交的子串,使它们按顺序拼在一起可以组成\(B\)串. \(|A|,|B|\ ...