☆前端☆---表单标签

表单标签

能够接收用户输入(输入 选择 上传)并将其发送给后端

action控制数据提交的目的地
  1.不写的情况下 默认提交到当前页面所在的路径
  2.写全路径(https://www.baidu.com)
  3.路径后缀(/index/)

input input标签就类似于是前端变形金刚
  type
  text:普通文本
  password:密文 不展示明文
  date:日期
  submit:触发提交动作
  button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作
  reset:重置表单内容

  radio:单选 可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked) checked="checked"

  checkbox:多选 同上 可以设置默认值

file:获取用户上传的文件

input 需要和 lable 一起用  input 只有框 所需要lable

点击 标签进入输入框

select标签  option  下拉框
默认是单选 可以通过multiple变成多选
如果想默认选择 用selected (selected="selected")

textarea标签
获取用户输入的大段文本

hidden 隐藏输入框

disabled

form表单默认是get请求 你需要通过method参数 换成post提交
form表单中 要想触发提交动作
只有两种情况可以
1.input标签type指定成submit
2.直接写button标签

获取用户输入(输入 选择 上传...)的标签 都必须有一个name属性
这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value

<input type="text" id="d1" name="username" value="默认值">
  name就相当于是字典的key
  value就是字典的值
  获取都的用户输入都会被放入value属性中

form表单传文件的时候 需要指定enctype参数

emmet插件
防呆措施

原文地址:https://www.cnblogs.com/lddragon/p/11456360.html

时间: 2024-11-06 07:46:16

☆前端☆---表单标签的相关文章

前端之head标签,基本标签,div和span,常用标签,表单标签

一.head标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="icon" href="https://www.jd.com/favicon.ico"> <meta name="keyw

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></

表单标签动画畅想

引言 今天来看一组表单标签动画效果,希望可以对大家有所帮助,灵感来自于Inspiration for Text Input和Text Input Love,一并致谢. 效果照例放在Codepen,虽少效果较慢,但值得期待.在线编辑,下载收藏. 搭建根基 我们同样使用了haml来简化html书写. #container -(1..15).each do %div.row %label %input{:type=>"text"} %span姓名 %label %input{:type

HTML表单标签

表单标签 <form action="" method=""></form> form 标签为html创建一个表单 action属性表示表单要提交到的页面 method属性表示表单数据提交时的传输方式  get|post get和post的区别 1.get明文传输,不安全,post密文传输,安全 2.get最多可传输255个字符,post对传输字符去限制 文本框标签<input /> 1.普通文本框 <input type=

html(五) -- 表单标签

表单标签: 表单标签的作用是用于提交数据给服务器的. 表单标签的根标签是<form>标签 常用的属性:    action: 该属性是用于指定提交数据的地址.    method: 指定表单的提交方式.            get : 默认使用的提交方式.  提交的数据会显示在地址栏上.            post :  提交的数据不会显示在地址栏上.注意: 表单项的数据如果需要提交到服务器上面,那么表单项必须要有name的属性值. 代码示例: 1 <!DOCTYPE html&g

Struts2中UI标签之非表单标签

1.非表单标签主要用于在页面生成一些非表单的可视化元素,例如Tab页面,输出HTML页面的树形结构等.当然,非表单标签也包含在页面显示Action里封装的信息,非表单标签主要有如下几个: a:生成一个超级连接(link). actionerror:如果Action实例的getActionError()方法返回不为null,则该标签负责输出该方法返回的系列错误. actionmessage:如果Action实例的getActionMessage()方法返回不为null,则该标签负责输出该方法返回的

SpringMVC表单标签简介

转自:SpringMVC表单标签简介 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 在正式介绍SpringMVC的表单标签之前,我们需要先在JSP中声明使用的标签,具体做法是在JSP文件的顶部加入以下指令: <%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>

html的表单标签

作用:用来采集用户输入的数据,然后发送给后台处理 表单标签: <form>       表示一张表单 常用属性: action: 表示提交的地址(提交给谁处理?) method:  表示提交的方式 get 1)把用户提交的参数暴露在浏览器的地址栏 2)敏感数据不适合用get提交 3)get方式提交的数据长度不超过1kb.例如编号数据 post 1)不会把用户提交的参数暴露在浏览器的地址栏 2)敏感数据适合post提交 3) post方式提交的数据长度没有限制(文件上传必须使用post方式) &

struts2学习笔记之十三(表单标签和非表单标签)

表单标签 这些UI标签都可以指定cssClass,cssStyle来指定CSS样式,而且可以指定大量的onXxx属性,用于绑定JS函数 form : 表单 head :引入一些辅助的css样式单和js脚本 hidden :隐藏域 label :生成一个标签 password : 生成一个密码框 select :列表框 checkbox : 只是生成一个复选框 radio :不是生成一个单选框 file :生成一个文件上传域 textfield :单行文本域 textarea :多行文本域 sub