首页 > 代码库 > Html中的表单

Html中的表单

2024-07-10 02:23:37   217人阅读



 在讲解今天Html表单之前，还是先看张图片来刺激一下。



 


 源码


<span style="font-size:18px;"><html>
 <head>
<title>超链接演示</title>      <!--网页标题-->
<body>
<h1 align="center">仿百度搜索框</h1>
<form action="01.php" method="post">
请输入要搜索的内容：<input type="text" name="keyword"/>  
<input type="submit" value=http://www.mamicode.com/"搜索"/>>
 
 看了上图百度的搜索页面，有木有心动一下，别慌你也可以的，这就是我们今天要讲的表单。
 
什么是Html表单——（可输入控件）
    表单用于搜集不同类型的用户输入。
 

表单的功能
  • 从访问您的Web站点的用户那里获得信息。访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息，然后单机某个按钮提交这些信息。
  • 客户端与服务器端进行信息交流的途径
 
 
表单的标记
  • Form标记用于创建一个表单，定义表单的开始与结束，它是一个容器，用于包含其他表单元素，例如文本框、单选框等。表单元素必须入在form标记内才有作用。
  • <form action=url(传送目标，处理表单信息的服务器端应用程序) method=处理表单数据的方法(POST/GET)如果不写method则默认提交方式为Get，name=表单名称>
  • POST方法可以传递大量信息
  • GET方法将值附加到请求该页的URL中，适合传递少量信息(默认方式)
 
 

上面讲述了表单的标记和基本结构，那么下面就该讲述那些可输入控件——表单元素标记
  • 单行文本框
  • <input name=”文本框名称” type=”text” value=http://www.mamicode.com/”初始值” size=”显示字符数” maxlength=”最多容纳字符数” readonly=”readonly”(设置为只读) disabled=”disabled”(设置为不可操作)>
  • 密码框
  • <input name=“文本框名称” type=”password” value=http://www.mamicode.com/”初始值” size=”显示字符串”/>
     
     -------------------------------------------------------------------------------------------------------------------------------------------------------------- 
     
     
  • 单选框
  • <input name=”单选框名称” type=”radio” value=http://www.mamicode.com/”提交值” checked=”checked”(是否被选中)/>
  • 复选框
  • <input name=”复选框名称” type=”checkbox” value=http://www.mamicode.com/”提交值”checked=”checked”(是否被选中)/>
  • 列表框
  • 菜单式
  • <select name=”列表框名称”>
  • <option selected=”selected” value=http://www.mamicode.com/”提交值”>列表1</option>
  • <option value=http://www.mamicode.com/”提交值”>列表2</option>
  • ……
  • </select>
  • 列表式
  • <select name=”列表框名称” size=”显示的行数” multiple(如果允许多选，则有该命令；都咋没有)>
  • <option value=http://www.mamicode.com/”提交值”>列表1</option>
  • …….
  • </select>
 
  • 浏览框
  • <input name=”名称” type=”file” size=”显示长度” />
  • 表单外框
  • <fieldset>…</fieldset>定义围绕表单中元素的边框
  • <legend>…</legend>legend元素为fieldset元素定义标题
  • 多行文本框
  • <textarea name=”多行文本框名称” cols=”每行中的字符数” rows=”显示的行数”>
 
 
 
  • 按钮
  • <input type=”按钮类型(reset(重置表单)、submit(提交表单)、button(普通按钮))” name=”按钮名称” value=http://www.mamicode.com/”按钮显示文本”/>
  • 图片按钮
  • <input name=”图片按钮名称” type=”image” src=http://www.mamicode.com/”图片路径”/>


上面就是表单元素的所有标记，有这么多是否是想记住呢？SAY NO。敲个小demo熟悉下就OK了。

源码
<html>
 <head>
<title>表单演示</title>      <!--网页标题-->
<body>
<h1>学生登录系统</h1>
<form name="reg" action="" method="post">
<table border="1" width="500" align="center" cellpadding="10"> <!--创建一个表格，宽度为500像素，外边框为10-->
<tr>    <!--表格第一行-->
<td>学生姓名:</td>   <!--表格第一行第一个单元格-->
<!--第二个单元格放置一个文本框，最大长度为10，只读-->
<td><input type="text" name="xingming" value=http://www.mamicode.com/"" size="30" maxlength="10" readonly="readonly "/>>
 
 
 小结：
    今天学习了下Html中的表单，说起来起始跟平时学习的编程语言中的控件很类似，或者可以说就是控件，只不过平时我们都是从工具栏中直接拖进来的，而在HTML中需要自己来创建，没有本质上的区别。
    建立表单后，就开始设计表单标记的一些属性，与编程语言中的设计大相径庭。
    刚开始学习Html的时候，感觉跟Excel特别相似，现在感觉跟编程语言又特相似，需要一些美工的基础，学习有时候就这样，在逐步的认识中逐渐带你进入另一个“世外桃源”


联系
我们