在解说今天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="搜索"/> </form> </table> </body> </head> </html></span>
看了上图百度的搜索页面，有木有心动一下，别慌你也能够的。这就是我们今天要讲的表单。
什么是Html表单——（可输入控件）
表单用于搜集不同类型的用户输入。
表单的功能
-
从訪问您的Web网站的用户那里获得信息。
訪问者能够使用诸如文本域、列表框、复选框以及单选button之类的表单元素输入信息，然后单机某个button提交这些信息。
-
client与server端进行信息交流的途径
表单的标记
-
Form标记用于创建一个表单，定义表单的開始与结束。它是一个容器。用于包括其它表单元素。比如文本框、单选框等。表单元素必须入在form标记内才有作用。
-
<form action=url(传送目标。处理表单信息的server端应用程序) method=处理表单数据的方法(POST/GET)假设不写method则默认提交方式为Get，name=表单名称>
-
POST方法能够传递大量信息
-
GET方法将值附加到请求该页的URL中，适合传递少量信息(默认方式)
上面讲述了表单的标记和基本结构。那么以下就该讲述那些可输入控件——表单元素标记
-
单行文本框
-
-
<input name=”文本框名称” type=”text” value=”初始值” size=”显示字符数” maxlength=”最多容纳字符数” readonly=”readonly”(设置为仅仅读) disabled=”disabled”(设置为不可操作)>
-
password框
-
-
<input name=“文本框名称” type=”password” value=”初始值” size=”显示字符串”/>
--------------------------------------------------------------------------------------------------------------------------------------------------------------
-
单选框
-
-
<input name=”单选框名称” type=”radio” value=”提交值” checked=”checked”(是否被选中)/>
-
复选框
-
<input name=”复选框名称” type=”checkbox” value=”提交值”checked=”checked”(是否被选中)/>
-
列表框
-
菜单式
-
<select name=”列表框名称”>
-
<option selected=”selected” value=”提交值”>列表1</option>
-
<option value=”提交值”>列表2</option>
-
……
-
</select>
-
列表式
-
<select name=”列表框名称” size=”显示的行数” multiple(假设同意多选，则有该命令；都咋没有)>
-
<option value=”提交值”>列表1</option>
-
…….
-
</select>
-
浏览框
-
<input name=”名称” type=”file” size=”显示长度” />
-
表单外框
-
<fieldset>…</fieldset>定义环绕表单中元素的边框
-
<legend>…</legend>legend元素为fieldset元素定义标题
-
多行文本框
-
<textarea name=”多行文本框名称” cols=”每行中的字符数” rows=”显示的行数”>
-
button
-
<input type=”button类型(reset(重置表单)、submit(提交表单)、button(普通button))” name=”button名称” value=”button显示文本”/>
-
图片button
-
<input name=”图片button名称” type=”image” src=”图片路径”/>
上面就是表单元素的全部标记，有这么多是否是想记住呢？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="" size="30" maxlength="10" readonly="readonly "/></td> </tr> <tr> <td>password：</td> <!--表格第二行--> <!--表格第二行第二个单元格放置一个password框，最大长度为30--> <td><input type="password" name="mima" size="30"></td> </tr> <tr> <td>性别：</td> <!--表格第三行--> <td> <label for="man">男</label> <!--表格第三行第二个单元格放置一个单选button--> <input type="radio" name="sex" value="男" id="man"> <label > <input type="radio" name="sex" value="女" >女 </label> </td> </tr> <tr> <td>个人爱好：</td> <!--表格第四行--> <td> <!--表格第四行第二个单元格放置复选button--> <input type="checkbox" name="love" value="音乐"/>音乐 <input type="checkbox" name="love" value="美术"/>美术 <input type="checkbox" name="love" value="电影"/>电影 </td> </tr> <tr> <td>交友目的：</td> <!--表格第五行--> <!--表格第五行第二个单元格放置多选框--> <td><select name=target size=3 multiple="multiple"> <option value=普通朋友>普通朋友</option> <option value=爱人>爱人</option> </select> </td> </tr> <tr><!--表格第七行--> <td>照片上传:</td> <td> <!--表格第七行放置浏览框--> <input type="file" name="pic"/> </td> </tr> <tr> <td>个人简单介绍:</td> <td> <textarea cols="35" rows="5"> </textarea> </td> </tr> <tr> <td>城市</td> <!--表格第九行--> <td> <!--表格第九行放置列表框--> <select name="citys"> <optgroup label="北京市"> <option value="海淀">海淀</option> <option value="朝阳">朝阳</option> <option value="东城">东城</option> </optgroup> <option value="北京">北京</option> <option value="上海">上海</option> <option value="天津">天津</option> <option value="广东" selected="selected">广东</option> <option value="南京">南京</option> </select> </td> </tr> <tr> <td colspan="2"> <!--表格第六行。而且横向合并单元格--> <!--表格第六行放置button--> <input type="submit" value="登录"/> <input type="reset" value="取消"/> <input type="button" value="查询"/> </td> </tr> </table> </form> </body> </head> </html>
小结：
今天学习了下Html中的表单。说起来起始跟平时学习的编程语言中的控件非常类似，或者能够说就是控件。仅仅只是平时我们都是从工具栏中直接拖进来的。而在HTML中须要自己来创建，没有本质上的差别。
建立表单后，就開始设计表单标记的一些属性，与编程语言中的设计大相径庭。
刚開始学习Html的时候，感觉跟Excel特别相似，如今感觉跟编程语言又特相似。须要一些美工的基础，学习有时候就这样，在逐步的认识中逐渐带你进入还有一个“世外桃源”
版权声明：本文博客原创文章，博客，未经同意，不得转载。