intellij idea使用教程 VMware 分布式服务 Vanilla JS 郑州小程序公司 java数据分析 mysql统计数量 matlab向量的模 css鼠标悬浮样式 oracle行转列函数 wps文件修复工具下载 python的str python获取字典的值 java框架学习 asp建站系统 flash实例 mac地址修改器 行业软件下载 dll文件下载 只狼鬼佛 infopath下载 刷声望 wow怎么赚钱 自动答题软件 mac画图工具 lol卡米尔 发射爱心的图片 密码翻译 淘宝店铺采集 qq制作网页 内存条有什么用 汉仪旗黑字体下载 ps怎么羽化图片边缘 淘宝退货怎么上门取件 max2014 重复文件查找 cad圆形变成多边形 php队列 磁盘碎片整理 如何用ps美白皮肤
当前位置: 首页 > 学习教程  > 编程语言

表单的简单使用

2020/12/28 20:16:55 文章标签:

一、表单的简单使用 1.语法&#xff1a;<formmethod"传送方式"action“服务器文件”>** 注意&#xff1a; 1.<form>是成对出现的&#xff0c;以<form>开始&#xff0c;以</form>结束,表单都必须放在其之间。 2.method传送方式&#xff0…

一、表单的简单使用

1.语法:<formmethod="传送方式"action=“服务器文件”>**

注意:

1.<form>是成对出现的,以<form>开始,以</form>结束,表单都必须放在其之间。

2.method传送方式,get/post是后端程序员考虑的问题

3.action浏览者输入的数据被传送到的地方,比如一个html页面,(save.php)


<formmethod="post"action="save.php">
 
  <labelfor="username">用户名:</label>
 
  <inputtype="text"name="username"/>
 
  <labelfor="pass">密码:</label>
 
  <inputtype="password"name="pass"/>
 
  </form>

文本输入框,密码输入框

当用户需要在表单中键入字母,数据等,就要用到文本输入框,文本输入框也可以转化为密码输入框


  语法:

  <form>

  <inputtype="text/password"name="名称"value="文本"/>

  </form>


注意:
1、type类型

  • 当type为text时,为文本输入框
  • 当type为password时,为密码输入框

2、name为文本框命名,以备后台aspphp使用

3.value:为文本输入框设置默认值(一般起提示作用)

<!DOCTYPEHTML>
 
  <html>
 
  <head>
 
  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
 
  <title>文本输入框、密码输入框</title>
 
  </head>
 
  <body>
 
  <formmethod="post"action="save.php">
 
  账户:
 
  <inputtype="text"name="myName"/>
 
  <br/>
 
  密码:
 
  <inputtype="password"name="pass"/>
 
  </form>
 
  </body>
 
  </html>
 
   
 
  

注意:

2、文本域:支持多行文本输入。

当用户需要在表单中输入大段文字时,就要用到文本输入域。

语法格式:

<textarearows="行数"cols=“列数”>文本 </textarea>
  
注意:

1.文本输入域以<textarea>开始,以</textarea>结束

2.rows:输入文本输入域的行数

3.cols:输入文本输入域的列数
  
4.在<textarea> </textarea>标签之间输入默认值


<!DOCTYPEHTML>
 
  <html>
 
  <head>
 
  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
 
  <title>文本域</title>
 
  </head>
 
  <body>
 
  <formmethod="post"action="save.php">
 
  <label>个人简介</label>
 
  <textarearows="5"cols="10">在这里输入内容...</textarea></span>
 
  <inputtype="submit"value="确定"name="submit"/>
 
  <inputtype="reset"value="重置"name="reset"/>
 
  </form>
 
  </body>
 
  </html>


3、使用单选框,复选框让用户选择

在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好办法。
在HTML中,有单选框和复选框,两者的主要区别是单选框中用户的选项只能选择一项,而复选框中用户可以任意选择多项,甚至全选。

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

注意:

1.type: radio控件单选框;checkbox控件复选框

2.value:提供数据到服务器的值

3.name:为控件命名,以备后台程序ASP,PHP使用

4.checked:当设置checked=“checked”时,该选项被默认选中


<!DOCTYPEHTML>
 
  <html>
 
  <head>
 
  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
 
  <title>单选框、复选框</title>
 
  </head>
 
  <body>
 
  <formname="iForm"method="post"action="save.php">
 
  你是否喜欢旅游?<br/>
 
  <inputtype="radio"name="radioLove"value="喜欢"checked="checked"/></span>
 
  <inputtype="radio"name="radioLove"value="不喜欢"/>
 
  <inputtype="radio"name="radioLove"value="无所谓"/>
 
  <br/><br/>
 
  你对那些运动感兴趣?<br/>
 
  <inputtype="checkbox"name="checkbox1"value="跑步"/>
 
  <inputtype="checkbox"name="checkbox1"value="打球"checked="checked"/>
 
  <inputtype="checkbox"name="checkbox1"value="登山"checked="checked"/>
 
  <inputtype="checkbox"name="checkbox1"value="健身"/>
 
  </form>
 
  </body>
 
  </html>
 

注意:
同一组的单选按钮,name的取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。

4、下拉列表框

使用下拉列表框,节省空间,既可以单选,又可以多选。

<!DOCTYPEHTML>
 
  <html>
 
  <head>
 
  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
 
  <title>下拉页表框</title>
 
  </head>
 
  <body>
 
  <formname="iForm"method="post"action="save.php">
 
  <label>爱好:</label>
 
  <select>
 
  <optionvalue="读书">读书</option></span>
 
  <optionvalue="运动">运动</option>
 
  <optionvalue="音乐">音乐</option>
 
  <optionvalue="旅游">旅游</option>
 
  <optionvalue="购物">购物</option>
 
  <spanstyle="color:#ff0000;"></select></span>
 
  </form>
 
  </body>
 
  </html>


本文链接: http://www.dtmao.cc/news_show_550454.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?