<!--表单所有标签-->
<form action="" method="" name="">
单行文本框:<input type="text" name="" id=""><br>
密码框:<input type="password" name="" id=""><br>
没啥用的按钮:<input type="button" name="" id="" value="按钮"><br>
提交按钮:<input type="submit" name="" id=""><br>
图片形式的提交按钮:<input type="image" name="" id=""><br>
重置按钮:<input type="reset" name="" id=""><br>
单选框:<input type="ridio" name="" id=""><br>
复选框:<input type="checkbox" name="" id=""><br>
下拉框:<select name="" id=""><br>
<option value="">请选择</option>
</select>
文本域:<textarea name="" id="" cols="30" rows="10"></textarea><br>
上传按钮:<input type="file" name="" id=""><br>
隐藏域:<input type="hidden" name=""><br>
</form>

  

(1)<form></form>:代表Html的表单.

  a)Action:指定表单数据提交到哪里

  b)Method:指定表单提交数据的方式

  c)Name:指定表单的名字

(2)文本框(单行)

<input type=’text’id=""name=""value=""/>

  a)type:规定input元素的类型

  b)Id:指定input元素的ID,唯一标识此元素

  c)Name:规定input元素名字

  d)Value:设置input元素的值

  e)Placeholder:设置输入内容的提示信息

(3)密码框:

<input type=’password’id=""name=""value=""/>

(4)普通按钮(不具备提交表单的功能):

<input type=’button’id=""name=""value=""/>

(5)提交按钮(具有提交表单的功能)

<input type=’submit’id=""name=""value=""/>

(6)图片形式的按钮(具有提交表单的功能)

<input type=’image’src="" id=""name=""value=""/>

(7)重置按钮(清空表单空间里的内容):

<input type=’reset’id=""name=""value=""/>

(8)单选框(name必须设置相同的名字):

<input type=’radio’id=""name=""value=""/>

  a)checked=’checked’:默认选中

  b)点击文字实现单选效果:(label中的for属性值必须和radio元素中的id值相同)

(9)多选框:

<input type=’checkbox’id=""name=""value=""/>

  a)默认选中:checked=”checked”

(10)下拉框:

<select id="" name="">

<option value=""></option>

</select>

(11)(多行)文本域:

<textarea id="" name=""></textarea>

  a)cols:设置文本域的宽度

  b)Rows:设置文本域的高度

(12)上传按钮:

<input type="file" name="" id="">

(13) 隐藏域:

<input type="hidden" name="" id="">

js form 表单使用的更多相关文章

  1. JS form表单提交的方法

    1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的 ...

  2. JS form 表单收集 数据 formSerialize

    做后台系统的时候通常会用到form表单来做数据采集:每次一个字段一个字段的去收集就会很麻烦,网站也有form.js插件可以进行表单收集,并封装成一个对象,通过ajax方法传到后台:现在介绍一种直觉采集 ...

  3. js——form表单验证

    用js实现一个简易的表单验证 效果: 代码: <html> <head> <title>js校验form表单</title> <meta char ...

  4. js form表单提交后如何可以不刷新页面 的解决办法

    表单可实现无刷新页面提交,无需页面跳转,如下: 通过一个隐藏的iframe实现, form表单的target设置为iframe的name名称,form提交目标位当前页面iframe则不会刷新页面 &l ...

  5. Ext.js form 表单提交问题

    var form = new Ext.form.FormPanel({ labelAlign : 'right', border : false, bodyStyle : 'background-co ...

  6. js form表单的校验

    if(!$("#form").validate().form()){ return false;} <元素 class="required">< ...

  7. js form 表单属性学习

    一.<form></form>标签      引用借鉴:http://www.cnblogs.com/fizx/p/6703370.html form标签的属性规定了当前网页上 ...

  8. js Form表单转json格式,及后台接收(多种方法)

    转载:https://blog.csdn.net/qq_40138785/article/details/81533015 一.serialize()方法格式:var data = $("# ...

  9. js form表单 鼠标移入弹出提示功能

    JS 部分 /* Copyright (C) 2009 - 2012 Email: wangking717@qq.com WebSite: Http://wangking717.javaeye.com ...

随机推荐

  1. Python中的高性能容器--collections

    集合模块 相对于 Python 中内置的称为链表.集合.字典和元组的默认容器类型来说,集合模块( collection module )提供了高性能的备选方案( alternative ). 简单地看 ...

  2. installer

    if (args.Length == 0) { ServiceBase[] ServicesToRun; ServicesToRun = new ServiceBase[] { new MyServi ...

  3. springboot IDEA新建Maven项目的Plugins出现红线的解决方法

    将pom.xml文件copy到桌面,删除项目中的pom.xml.发现项目maven中没有任何东西后,然后将桌面的pom.xml粘贴到项目目录下,刷新maven就ok了

  4. 以yarn-client方式提交spark任务,任务一直卡在ACCEPTED状态

    问题背景 spark是以客户端的方式安装的,并没有启动spark的mesos集群,这时候的spark就相当与hive客户端. 以local模型和yarn-cluster方式提交任务,都能正确额执行,但 ...

  5. java static变量及函数

    java以类为基础,没有游离在类之外单独存在的变量.所以,c++中的全局变量,在java中应该是不存在的.java中有的是成员变量和成员方法.当成员前以static修饰时,即为静态成员变量或静态成员方 ...

  6. Mac音频播放

    Mac音频播放 audioqueue播放pcm数据 http://msching.github.io/blog/2014/08/02/audio-in-ios-5/ audiounit播放pcm数据  ...

  7. Spring 重定向(Redirect)指南

    原文:Hacking the IntegerCache in Java 9? 链接:https://dzone.com/articles/hacking-the-integercache-in-jav ...

  8. php框架路由美化后提示No input file specified

    此问题出现在.htaccess上 Apache按如下代码修改即可: RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond % ...

  9. cadvisor应用

    cadvisor主页:https://github.com/google/cadvisor 容器主页:https://hub.docker.com/r/google/cadvisor cAdvisor ...

  10. tomcat下载地址

    https://archive.apache.org/dist/tomcat/tomcat-6/v6.0.53/bin/ Index of /dist/tomcat/tomcat-6/v6.0.53 ...