form表单及实际应用

form表单 定义与用法

  <form> 标签用于为用户输入创建 HTML 表单。

  表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

  表单还可以包含 menustextareafieldsetlegend 和 label 元素

  表单用于向服务器传输数据。

  form 元素是块级元素,其前后会产生折行。

form表单格式及元素使用介绍

<form name="" action="" method=""> 

  action 接受的路径         Method 提交传输方式 get  fost

   Input类型可以分为以下几种:

    表单元素的类型:

 文本类型:

      输入框:text

      密码框:password

    日期:date

        数据:data

         文件:file

        隐藏框:hidden

      提交按钮:

        普通按钮:button

        表单按钮:submit

         清空按钮:reset

      选择按钮   默认值(checked)

       单选按钮:radio

       多选按钮:checkbox

      通用类型格式:

         Input type=“” name=“”

      不通用类型格式:

          Multiple:多选 是select的属性  和size联合使用 size显示下拉值数量

        Select 下拉框 默认值(selected)

        < Select name=“” id=“”

         <Option selected ></ Option >

           Textarea      文本多行输入框

例:

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7 <body>
 8     <form action="" method="post">
 9
10         账号:<input type="text" name="user"><br>
11         密码:<input type="password" name="pawe"><br>
12         生日:<input type="date" name="bir"><br>
13         性别:<input type="radio" checked>男&nbsp;<input type="radio">女<br>
14         兴趣:<input type="checkbox">篮球&nbsp;<input type="checkbox">足球&nbsp;<input type="checkbox">排球<br>
15         爱好:<input type="checkbox">乒乓球&nbsp;<input type="checkbox">爬山&nbsp;<input type="checkbox">跑步<br>
16         民族:<select name="" id="">
17                    <option>汉族</option>
18                         <option>回族</option>
19                         <option>藏族</option>
20                         <option>傣族</option>
21                         <option>壮族</option>
22
23         </select><br>
24         个人介绍:<br>
25             <textarea name="" id="" cols="30" rows="10"></textarea><br>
26
27         上传文件:<input type="file"><br>
28         <button>提交</button>
29         <input type="submit" name="" value="sub提交">
30         <input type="reset" id="" name="" value="清空" >
31     </form>
32 </body>
33 </html>

代码运行实图:

原文地址:https://www.cnblogs.com/zhai113/p/11262990.html

时间: 2024-10-08 21:23:23

form表单及实际应用的相关文章

form表单那点事儿(上) 基础篇

做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右.了解更深,用的更顺. 目录: 表单属性 表单元素 常识 模拟外观 表单属性 这个表单展示了form表单常用的属性 属性名 属性值 描述 action 一个url地址 指定表单提交到的地址 method `GET` , `POST` 表单将以此种方法提交到服务器 target `_self` 当前页面 `_blank` 每次在新窗口打开 `blank` 每次在同一个新窗口打开 `_parent` 父级frame `_top` 顶

Form表单Ajax系列化提交数据

页面上有一个商品的颜色尺码二维输入框,输入完毕之后需要把数据进行提交,点击立即购买则进行页面的跳转,通过form表单将数据提交到后台,而点击添加到购物车的话,则会通过ajax进行数据的提交,页面不进行跳转.前台样式: 下面是form表单: <form id="cartForm" action="${ctx}/cart/save" method="post"> <div class="product-page-optio

通过button将form表单的数据提交到action层

form表单中不需要写action的路径,需要给form表单一个唯一的id,将你要提交的信息的表单中的标签name="action中的javabean对象.javabean属性".给button按钮添加一个onclick()点击事件,并实现该点击事件,在该onclick()方法中通过ajax将form表单中的数据提交给action层 JSP页面中的代码: 1 <form id="handleform"> 2 <!-- 根据学生id修改学生信息 --

HTML table、form表单标签的介绍

本篇主要介绍 table.form标签以及表单提交方式. 目录 1. <table> 标签:在HTML 中定义表格布局. 2. <form> 标签:用于创建 HTML 表单. 3. 表单提交方式:介绍get.post方法. 1. <table> 标签 1.1 说明 在HTML 中定义表格布局. 1.2格式 <table> <caption></caption> <tr> <th></th></

serialize可以获取form表单里面的数值

serialize属性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="../jquery-1.12.2.js"></script> 7 </head> 8 <

微信小程序组件解读和分析:九、form表单

form表单组件说明: 表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交. 当点击 <form/> 表单中 formType 为 submit 的<button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key. form表单组件用法: 重置:<butt

ajax传递数组、form表单提交对象数组

在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发任务中,遇到了需要批量传递对象,也就是需要传递对象数组,在此做个总结.今天又遇到需要向后台传递数组,便一并写下来吧. 1.ajax传递普通数组 前台代码 var deleteNum= [];//定义要传递的数组 deleteNum.push("1"); deleteNum.push(&qu

form表单提交的两种方式 button和submit的使用方法

1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的头部插入一个js方法: function checkUser(){   var result = document.getElementById("userid").value;   var password = document.getElementById("userpass

按Enter键后Form表单自动提交的问题

怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然出现这种情况,脑海中第一反应是,keydown事件是不是出问题了,然后找啊找啊找啊,然后没有然后. 在把input元素上的所有事件移除掉后,我自信的按了一下enter键.艾玛,又刷新了.心里那个苦哎. 二.列出所有可能 一阵捣鼓之后,脑海中列出了所有按下enter键后的改变,url改变,多了一个问号

HTML5的form表单属性

form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为form表单的id属性值即可,表单form与从属元素的从属关系依然有效, like this: <form id="log"> <input type="submit"> </form> <input type="sub