端午小长假--前端基础学起来02与浏览器交互,表单标签

  • form  与用户进行交互,将浏览者的数据传到服务器端,相当于一个容器

语法:<form method = "传送方式"  action = "服务器文件">

解释:method:数据传送的方式(get/post),action:浏览者输入的数据被传送到的地方,比如一个页面

  • 文本/密码输入框

语法:<form>

      <input type="text" name="名称" value="文本"/>

      <input type="password" name="名称" value=“文本”>

   </form>

解释:当type="text"时,输入框为文本输入框; 当type="password"时, 输入框为密码输入框;name:为文本框命名,以备后台程序ASP 、PHP使用。value:为文本输入框设置默认值。(一般起到提示作用)

  • 多行文本输入框

语法:<textarea rows="行数" cols=“列数”>文本</textarea>

解释:testarea 标签是成对出现的,cols 是多行文本框的列数,rows 是多行文本框的行数,文本是设置的默认值

eg:

<form action="save.php" method="post" >
<textarea rows="10" cols="50" >在这里输入内容...</textarea>
</form>

  • 单选框、复选框

语法:<input type="radio/checkbox" value="值" name=“名称” checked=“checked”>

解释:radio:单选框,checkbox:复选框;value:提交到后台的值,name:为控件命名,供后台使用,当checked设置“checked”时,默认选中

注:同一组单选按钮,name取值要一致,这样才能保证单选

  • 下拉列表框(单选)

语法:

<select>

  <option value="运动1">运动2</option>

  <option value="看书1" selected="selected">看书2</option>

</select>

解释:运动1是向服务器提交的值,运动2是页面显示的值,selected="selected"默认选中这个值

  • 下拉列表框(多选)

语法:在select标签中设置 multiple=“multiple”

<form>

<select multiple="multiple">
<option value="看书">看书</option>
</select>
</form>

  • 提交按钮/重置按钮

语法:<input type="submit" value="提交">

解释:type值设为submit时,按钮才能提交,valus 是按钮上显示的文字

语法:<input type="reset" value="重置">

解释:type值设为reset时,按钮才有重置功能,valus 是按钮上显示的文字

  • form表单中的label标签

解释:当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就选中和该标签相关联的表单控件上面)

语法:<label for="控件id名称">

<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />

</form>

时间: 2024-11-10 00:09:10

端午小长假--前端基础学起来02与浏览器交互,表单标签的相关文章

端午小长假--前端基础学起来04CSS选择器

定义: 选择器{ 样式: } 选择器指明{}中的样式的作用对象,即作用于网页中的哪些元素 <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>选择器</title><style type="text/css">body{ font-size:12px; color:red; }&l

端午小长假--前端基础学起来03CSS为网页添加样式

定义:用于定义HTML内容在浏览器内的显示样式,如文字大小,颜色,字体 设置样式:将要设置样式的内容用<span></span>样式括起来,然后再head中设置span <head><style type="text/css">span{ color:red;}</style></head> <body> <p>慕课网,<span>超酷的互联网</span>.IT技术

端午小长假--前端基础学起来01

HTML和CSS的关系 1)HTML是网页上面的文字.图片的载体 2)CSS是样式,文字的字体,颜色,边框 3)JavaScript是特效,弹出淡入 HTML标签 1)<h1></h1>是标题标签,<p></p>是段落标签,<img src="1.jpg">是图片标签 2)网页中每一部分的内容都要放在标签中才能显示 3)标签不分大小写,一般都是小写 HTML文件的结构 <HTML>根标签 < head>

☆前端☆---表单标签

表单标签 能够接收用户输入(输入 选择 上传)并将其发送给后端 action控制数据提交的目的地 1.不写的情况下 默认提交到当前页面所在的路径 2.写全路径(https://www.baidu.com) 3.路径后缀(/index/) input input标签就类似于是前端变形金刚 type text:普通文本 password:密文 不展示明文 date:日期 submit:触发提交动作 button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作 reset:重置表单内容

天河微信小程序入门《四》:融会贯通,form表单提交数据库

天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数据库已经是没有什么可写的了.不过既然开篇了就不能太监么,所以还是分享出来给大家.我当时的目的是为了实验api的功能和跟后台数据的通讯存储,所以没有考虑到美观之类的,界面非常丑请大家包涵.一个带form表单的页面在这里定义好自己form表单的元素名称 01 02 03 04 05 06 07 08 09 10

JavaScript基础 submit按钮结合onclick事件 实现表单的提交与验证

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

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

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

跟KingDZ学HTML5之十一 HTML5 Form 表单新元素

新的课程又开始,哈哈,最近的文章更新比较快,希望大家跟上俺的步伐啊,呵呵,但是每当看到阅读量,哎,还真不多,可是俺还要坚持写下去,不知道,大家是不是都没有在研究HTML5呢? 这节课程,讲的是 From 表单 新增加的几个新的元素,他和前面的两节课程 同属于一个范围,只不过长的比较特殊.所以就提炼出来了. 旁白:俺不是前端工程师啊,学习HTML5完全是因为,哈哈,这个东西太酷了.俺是正宗滴NET程序员 好了第一个出现的新元素是 datalist 哈哈,这个好解释了,前面我们已经使用过了. 还是用

前端开发HTML5——表单标签

表单简介 Form表单主要用于用户与Web应用程序进行数据的交互,它允许用户将数据发给web应用程序,网页也可以拦截数据的发送以便自己使用.form通常由一到多个表单元素组成,这些表单元素是单行/多行文本框,下拉菜单,按钮,复选框,单选按钮,时间表单元素时 一般要配合label标签,用于描述其目的.其可用属性如下. action 用于处理表单信息的应用程序的地址.  method 浏览器用来提交表单的HTTP方法. get        对应于Http协议的GET方法,表单数据被附加在uri上,