<form action="http://wichkelysmart.com/hfhtmlcss/contest.php" method="post"></form>

表单的所有内容都包含在form标签中  action属性中的内容将表单提交的的数据交给wichkelysmart.com链接内的hftmlcss文件夹中的contest.php服务器脚本处理
所使用的方法是post

1:<input type="text" name="1" value="value控制文本框内初始化的值">
2:<input type="submit" name="2" value="提交按钮由value设置"> 

3:女性:<input name="3" type="radio" value="选择1">不男不女:<input type="radio" name="3" value="复选中的value是传递给服务器的值"><br><br><br>
4:苹果<input type="checkbox" name="4" value="复选1">草莓<input type="checkbox" name="4" value="复选中的value是传递给服务器的值">香蕉<input type="checkbox" name="4" value="复选3">

Type确定是什么类型的控件,浏览器会把name当做标签把收集到的数据发送到服务器,这样服务器才能区分谁是谁

例如如果在一个名字为“zip”的text<input>元素中输入了邮政编码90050,表单提交时就会把“zip=90050”发送到服务器(HEAD FIRST HTML第677页练习)

注意name要与后台脚本文档代码中的一致,在使用别人编写的一个服务器脚本时,他必须告诉我要使用哪些元素名

复选框浏览器会发送“4=香蕉&苹果&草莓”到服务器

无需知道像服务器发送数据的后台细节 但是需要知道服务器脚本期望得到的表单元素的名字和类型

与后台的交互式通过URL进行的 表单里的数据通过URL与后台脚本进行数据传输(代码要相互呼应——即表单名字和类型)

浏览器向服务器传送收集到得数据——用表单

浏览器处理服务器传回的数据——用ajax

表单发送给服务器的数据与name value和text文本框中的内容相关

text:文本框,input默认的type,不写就是这个,value表示文本框里的值。
password:密码框,value表示密码框里的值。
submit:提交按钮,value表示按钮上的文字
button:普通按钮,value表示按钮上的文字
reset:重置按钮,value表示按钮上的文字
radio:单选框,value表示该单选框的真实值(一般真实值和数据库对应,显示的值给用户参考的)
checkbox:复选框,value表示该复选框的真实值
hindden:隐藏表单域,value表示该表单域的值。
单选和多选:
input中的value可以理解为传送给服务器的值
type可以是button普通按钮,submit提交按钮,reset重设按钮,radio单选框,checkbox复选框,passward密码输入框
 是提交给服务器的,服务器语言会调用里面的值 你没value的话,服务器就没数据
 服务器通过 name 知道传的是谁的值 value则是对应的值是

 5:<textarea name="5" rows="10" cols="48">这里是初始化文字-这里是初始化文字-这里是初始化文字-这里是初始化文字-这里是初始化文字-这里是初始化文字-这里是初始化文字-这里是初始化文字-这里是初始化文字</textarea>

rows设置浏览器文本区高度 cols设置宽度 开始和结束标签中间为初始化文字 在textarea元素中加个maxlength属性可以限制输入文字的的字符

 6:请选择<select name="6"><option value="传递给服务器的数据">选择1</option><option value="传递给服务器的数据">选择2</option><option value="传递给服务器的数据" selected>选择3</option><option value="传递给服务器的数据">选择4</option></select>

以上数据提交后浏览器会提交6=”传送服务器的数据”,即name=”value“ 到服务器,与选择的按钮内容无关

selected布尔属性,布尔属性不需要值,当进入页面时这个选项会被默认选中

form标签中的表单元素可以是input也可以是textarea select option

7:<input type="number" min="0" max="20" value="请输入数字"><br><br><br>
输入数字和允许输入数字的最大值最小值<br><br><br>
8:<input type="range" min="0" max="20" step="5"><br><br><br>
range类似number 只是会显示一个滑动条而 其中step设置间隔数(步数)<br><br><br>
9:<input type="color"><br><br><br>
点击弹出颜色选框<br><br><br>
10:<input type="date"><br><br><br>
点击后弹出一个时间选择框 火狐不支持此属性会 显示text文本框
11:<input type="email"><input type="tel"><input type="url">
手机端会得到一个定制的键盘

<input type="checkbox" name="extras[]" value="catalog" checked>

编写name.php服务器脚本所用的脚本脚本语言(php)希望得到一点提示,想知道一个表单变量包含多少个值,提供这个提示的做法就是在名字后面增加一个”[]“

<input type="passworld" name="secret">

输入的文本会加掩码

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

可以选择上传一个文件 文件内容会上传到服务器,必须使用post方法

<input type="text" placeholder="Buckaroo Banzai">

大多数input标签都可以使用placeholder属性,他会提示你要在文本框中输入的内容

<input type="text" placeholder="1" required>

required是一个布尔属性, 也就是这个文本框必须输入内容后才可以提交

二、

转载于:https://www.cnblogs.com/cheney-cai/p/5955234.html

Form表单中的元素 控件集相关推荐

  1. form表单中的常用控件

    <form action="#" method="post">placeholder:输入表单是提供一个提示<input type=" ...

  2. form表单中input元素readonly和disabled属性的区别:

    disabled 指当input元素加载时禁用此元素,disabled=true时,无法修改内容,input内容不会随着表单被提交 readonly规定输入字段为只读,readonly=true时,页 ...

  3. ExtJS4.2学习(17)表单基本输入控件Ext.form.Field(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...

  4. form表单中根据值判断是否disabled_Java 0基础入门 (Html表单、表单元素)

    上一篇:Java 0基础入门 (Html标签的使用) 表单在网页中主要负责数据采集功能. 一.表单实际应用场景 百度搜索 5173注册 如上两张图,图中的黑色线条是我画上去的,如果按照黑线,在Excl ...

  5. 新一代纯前端控件集 WijmoJS 2018V2发布,提供 Web 设计器,可动态设计页面并生成代码...

    概述 作为一款纯前端控件集,WijmoJS 秉承"快如闪电,触控优先"的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进.除在全球率先支持 An ...

  6. form表单中的onSubmit

    今天看一个代码,突然发现了一个form表单中的onSubmit,估计是好久都没有写前端表单提交了,突然忘了,赶紧到网上查了查. 原文地址:https://www.cnblogs.com/ahudyan ...

  7. [转]html5表单上传控件Files API

    表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...

  8. html5表单上传控件Files API

    表单上传控件:<input type="file" /> (IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:&l ...

  9. form表单中的enctype属性

    form表单中的enctype属性 enctype就是encodetype就是编码类型的意思.   multipart/form-data是指表单数据中由多部分构成,既有文本数据,又有文件等二进制数据 ...

最新文章

  1. 某米浏览器黑名单文件破解
  2. 杨立昆辞Facebook人工智能实验室主任,任首席科学家
  3. c++ hashmap入门教程
  4. Linux系统入门之如何安装Linux系统
  5. 安装secureCRT提示sorry的解决办法
  6. 518. 零钱兑换 II golang动态规划
  7. LeetCode 2186. 使两字符串互为字母异位词的最少步骤数
  8. KNN算法检测手势动作
  9. Python《wallpaper abyss壁纸》
  10. 利用TreeView实现C#工具箱效果
  11. 温度pid自整定算法c语言,程序温控仪中PID参数自整定算法-自动化仪表.PDF
  12. Photoshop脚本 镜头光晕滤镜的使用
  13. 合肥工业大学计算机网络期中考试,计算机网络实验报告合肥工业大学
  14. ikbc机械键盘打字出现重复_机械键盘按键 按一次触发多次
  15. 苹果微信多开_一个手机能登两个微信吗
  16. 解决windows server 系统中80端口被占用
  17. 小米平板1 android5,小米平板5即将到来?对小米平板前几代做了一下总结
  18. 计算机管理找不到指定模块,Win7卸载软件时提示找不到指定模块图文教程
  19. 图神经网络(Graph Neural Networks)
  20. 安装vue-cli遇到npm ERR! code ECONNREFUSED问题

热门文章

  1. 【PyCharm疑问】在pycharm中带有中文时,有时会导致程序判断错误,是何原因?...
  2. 使用PHP实现用户登录和注册的功能
  3. R可视化lend_club 全球最大的P2P平台数据75W条
  4. object-c 随机数总结
  5. The Linux device model
  6. hdu 1058 Humble Numbers
  7. StoryBoard学习..(很详细.)
  8. 1026: [SCOI2009]windy数 (按位DP)
  9. 11 单线程+多任务异步协程 爬虫
  10. 《大话数据结构》读后总结(六)