不积跬步无以至千里

记录精彩的程序人生

  • 首页
  • Java
  • Golang
  • PHP
  • Python
  • Nodejs
  • Lua
  • Docker
  • DevOps
  • 文章归档
  • 默认分类
  • 关于
  • 标签

  • 搜索
PostgreSQL hbase 时间同步 nexus 开机启动 nexus, 开机启动 jenkins安装配置 gitlab安装配置 gitlab安装 文件系统 fastdfs gcc切换 gcc升级 mysql8 交换空间 虚拟内存 tcp thrift lua tag test VPN SoftEtherVPN homebrew asm spring tomcat maven jdk ios mac 图案字符 figlet mysql半同步复制 mysql主从同步 一主多从 一主一从 主从同步 反向代理 密码重置 test 虚拟机扩容 swap 虚拟空间 docker ldocker grpc-gateway protobuf 微服务 go grp GRPC 授权登录 OAuth2.0 SOA supervisord supervisor RPC CentOS rabbitmq 环境变量 php-fpm php.ini error php7 lnmp 编译安装 mysql nginx linux java php python redis 字符串操作 mysql5.7 Solo

Html表单的基本用法

发表于 2018-11-15 | 分类于 默认分类 | 0 | 阅读次数 1564

在做php网站开发中,HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息,下面就介绍下表单的基本用法。

举个简单的例子,一个让用户输入姓名的HTML表单(Form)。示例代码如下:

<form action="yourname.asp" method="get">
请输入你的姓名:
<input type="text" name="yourname">
<input type="submit" value="提交">
</form>

学习HTML表单(Form)最关键要掌握的有三个要点:

  • 表单控件(Form Controls)
  • Action
  • Method
先说表单控件(Form Controls),通过HTML表单的各种控件,用户可以输入文字信息,或者从选项中选择,以及做提交的操作。比如上面的例句里,input type= "text"就是一个表单控件,表示一个单行输入框。

用户填入表单的信息总是需要程序来进行处理,表单里的action就指明了处理表单信息的文件。比如上面例句里的yourname.asp。

至于method,表示了发送表单信息的方式。method有两个值:get和post。get的方式是将表单控件的name/value信息经过编码之后,通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送,你在地址栏看不到表单的提交信息。那什么时候用get,什么时候用post呢?一般是这样来判断的,如果只是为取得和显示数据,用get;一旦涉及数据的保存和更新,那么建议用post。

HTML表单(Form)常用控件(Controls)

HTML表单(Form)常用控件有:
表单控件(Form Contros) 说明
input type="text" 单行文本输入框
input type="submit" 将表单(Form)里的信息提交给表单里action所指向的文件
input type="checkbox" 复选框
input type="radio" 单选框
select 下拉框
textArea 多行文本输入框
input type="password" 密码输入框(输入的文字用*表示)

表单控件(Form Control):单行文本输入框(input type="text")

单行文本输入框允许用户输入一些简短的单行信息,比如用户姓名。例句如下:
<input type="text" name="yourname">

表单控件(Form Control):复选框(input type="checkbox")

复选框允许用户在一组选项里,选择多个。示例代码:
<input type="checkbox" name="fruit" value ="apple">苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>
用checked表示缺省已选的选项。
<input type="checkbox" name="fruit" value ="orange" checked>桔子<br>

表单控件(Form Control):单选框(input type="radio")

使用单选框,让用户在一组选项里只能选择一个。示例代码:
<input type="radio" name="fruit" value = "Apple">苹果<br>
<input type="radio" name="fruit" value = "Orange">桔子<br>
<input type="radio" name="fruit" value = "Mango">芒果<br>
用checked表示缺省已选的选项。
<input type="radio" name="fruit" value = "Orange" checked>桔子<br>

表单控件(Form Control):下拉框(select)

下拉框(Select)既可以用做单选,也可以用做复选。单选例句如下:
<select name="fruit" >
  <option value="apple">苹果
  <option value="orange">桔子
  <option value="mango">芒果
</select>
如果要变成复选,加muiltiple即可。用户用Ctrl来实现多选。例句:
<select name="fruit" multiple>
用户还可以用size属性来改变下拉框(Select)的大小。

表单控件(Form Control):多行输入框(textarea)

多行输入框(textarea)主要用于输入较长的文本信息。例句如下:
<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
其中cols表示textarea的宽度,rows表示textarea的高度。

表单控件(Form Control):密码输入框(input type="password")

密码输入框(input type="password")主要用于一些保密信息的输入,比如密码。因为用户输入的时候,显示的不是输入的内容,而是黑点符号。。例句如下:
<input type="password" name="yourpw">

表单控件(Form Control):提交(input type="submit")

通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句如下:
<input type="submit" value="提交">

表单控件(Form Control):图片提交(input type="image")

input type=image 相当于 input type=submit,不同的是,input type=image 以一个图片作为表单的提交按钮,其中 src 属性表示图片的路径。
<input type="image" src ="images/icons/go.gif"
alt = "提交" NAME="imgsubmit">
Zend Studio For Eclipse 6.1.2 汉化方法
Zend Studio for Eclipse代码提示功能消失的解决方法
  • 文章目录
  • 站点概览
ken

ken

记录精彩的程序人生

498 日志
9 分类
77 标签
RSS
Creative Commons
Links
  • 酷壳
0%
© 2010 — 2025 ken
由 Halo 强力驱动
鄂ICP备18013899号-1