您的当前位置：首页正文

第5章计算机表单

来源：二三娱乐

第五章表单第五章表单5.1 表单概述5.2 常用表单对象5.3 制作表单页面5.1 表单概述表单技术可以实现浏览者与服务器之间信息的交互传送，它是网络信息收集处理的一种重要的方式。通过表单可以从网络的用户端收集信息，然后将收集来的信息经服务器处理后再反馈给用户。目前，有非常多的网站都在应用表单技术，如网上调查、电子商务、留言板等页面都能够接收浏览者输入的信息，而表单已成为网站获取用户信息的重要手段。表单应用表单应用表单应用表单应用一、表单作用表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，它由表单元素和一般内容组成。二、表单工作原理表单有两个重要组成部分：1）、表单页面。2）、用于处理浏览者在表单域中输入的信息的服务器端的应用程序或脚本程序，如CGI、ASP等。浏览者在网页上看到有关表单的页面，只是供浏览者输入信息的表单页面。当浏览者按要求在表单中填写有关信息，单击表单的“提交”按钮之后，表单的内容就会上传到服务器，并且由事先编写好的CGI或ASP程序来处理这些信息，最后服务器再将处理的结果发送给浏览者的浏览器。可见，表单的应用必须依赖服务器端脚本才能真正发挥其功能。5.2 常用表单对象常用表单对象（元素）有文本域、单选按钮、复选框、列表框、文件域、按钮、隐藏域、图像域等。一、创建表单表单是用来输入数据或与网站进行交互的工具。可以将整个网页创建成一个表单网页，也可以在网页的部分区域中添加表单。1 、创建步骤1）将光标置于欲插入表单的位置2）插入表单对象（form）3）设置表单属性在文档中插入了表单对象后，单击表单红色虚线框，或单击HTML状态栏中的之间的内容就是一个表单。◇表单form中的HTML代码要完成两件事情：一是指出服务器程序的路径和名称，二是要将给定信息传递给服务器程序。表单标记在

标记里有两个属性：action、method。二、在表单中添加不同元素每一个表单都是通过添加各种不同的表单对象（元素）来实现表单的功能。添加表单元素要在表单（红色虚框）中。使用“插入”工具栏的“表单”选项添加表单元素1、文本域文本域是最常见的表单对象之一，可以输入字母、数字、文本等类型的内容。文本可以是单行或多行显示，也可以以密码的方式显示，在这种情况下，输入文本将被替换为星号或其它符号，以避免旁观者看到这些文本，一般用作密码等项目。1）、设置文本域属性文本域属性对话框2）、标记说明（可表示九种表单元素）◇是个单标记，它必须嵌套在表单标记中使用。◇标记有六个属性：type、name、size、value、maxlength和checked，其中name和type是两个必选属性。◇服务器处理程序通过name属性值来提取用户所输入的信息。◇type属性指定input的类型◇type主要有九种类型：text、password、radio、checkbox、submit、reset、image、hidden和file。3）文本框text◇当type的类型为text时，表示单行文本框。◇格式：◇size属性：用于指定文本框的长度，默认值为20，以字节为单位。◇value属性：设定预先出现在文本框中的内容。◇maxlength属性：表示该文本框允许用户输入的最大字符数。此值总是大于或等于size属性的参数值。4）、密码框password当type的类型为password类型与text类型使用起来很相似，用星号“*”来代替每个密码字符。5）多行文本框textarea◇之间的内容就是显示在文本输入框中的初始信息。◇

标记有3个属性：name、rows和cols。2、单选按钮/单选按钮组在一组选项中只能选择一个选项，如在性别单选按钮组中选中了“男”单选按钮，再选中“女”单选按钮时，“男”单选按钮就会被撤消。1）、单选按钮的属性面板2）、单选按钮radio◇当type=radio时，表示一个单选框。◇格式：<input type=“radio” name=“”value=“” checked=\"checked\">◇同组的选项只能取一个值，单选框name 属性相同者为一组！◇checked属性用于指定该选项在初始时是否被选中。3、复选框复选框允许同时选择多个选项。1）复选框属性面板2）复选框checkbox◇当type=checkbox时，表示复选框◇格式：<input type=“checkbox” name=“” value=“” checked=\"checked\">◇由于选择是多项的，属性name应取不同的值。value属性的参数值必须与选项内容相同或基本相同，该属性是不可缺少的。◇checked属性用于指定该选项在初始时是被选中的。4、列表/菜单“列表”指在一个下拉列表框中显示一些选项，可以从其中选择多个。“菜单”指在一个菜单中显示一些选项值，用户只能从中选择单个选项。1）列表/菜单属性面板“列表值”对话框2）select标记<select>标记是成对标记，首标记<select>和尾标记</select>之间的内容就是一个下拉式菜单的内容。<select>标记必须与<option>标记配套使用，<option>标记用于定义下拉菜单中的各个选项。<select>标记有name、size和multiple三个属性。3）option标记◇<option>标记用来定义菜单中的选项。◇<option>标记必须嵌套在<select>标记中使用。一个菜单中有几个选项，就要有几个<option>标记与之相对应，选项的具体内容写在每个<option>之后。◇<option>标记有两个属性：value和selected，它们都是可选的。◇value属性：它的参数值是当该项被选中并提交后，Web浏览器传送给服务器的数据。◇selected属性：用来指定选项的初始状态，表示该选项在初始时是被选中的。◇若在<select>标记中设定multiple属性，可以在多个<option>标记中带有selected属性，即同时多个选项被预选。菜单示例：<select name=\"select\" size=\"1\"><option value=\"本科\">本科</option><option value=\"专科\">专科</option><option value=\"硕士研究生\">硕士研究生</option></select>列表示例：<select name=\"select\" size=\"3\"><option value=\"本科\">本科</option><option value=\"专科\">专科</option><option value=\"硕士研究生\">硕士研究生</option></select>5、按钮网页设计者设计表单后，还要提供表单发送、复位等命令，以便访问者输入信息后，能用该命令发送信息或修改信息。通常是使用按钮触发命令。在网页的表单设计中，按钮有三种基本动作：◇提交表单（Submit Form）：将表单域内的内容发送到用户指定的地址。◇复位表单（Reset Form）：将表单域内的所有表单对象（组件）的内容还原为初始值。◇无动作（None）：也称为自定义。1）、按钮的属性面板【按钮名称】：定义按钮名称。一般取名为“Submit”。【标记】：定义按钮上的文字，可以使用中文，如“确定”、“提交”、“注册”等。【动作】：设置按钮触发的动作。（有三种动作选择）2）提交按钮submit◇当type=submit时，表示一个提交按钮。◇格式：<input type=“submit” name=“” value=“”>◇提交按钮的name属性是可以缺省的。除name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字。◇在一个表单中必须有提交按钮，不然将无法向服务器传送信息。3）重置按钮reset◇当type=reset时，表示一个重置按钮。◇格式：<input type=“reset” name=“” value=“”>◇提交按钮的name属性是可以缺省的。除name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字。value属性的缺省值是“重置”。6、文件域使用户可以浏览到本地电脑上的某个文件，并将该文件作为表单数据上传。1）文件域的属性面板2）文件域file◇当type=“file”时，表示一个文件域。文件域实现文件上传。◇格式：<input type=“file” name=“file1”>7、图像域图像域可以在表单中插入一个图像。图像域可用于制作图形化按钮，使按钮更美观、更独特。图像域的属性面板5.3 制作表单页面1、制作登录页面2、制作注册页面            <div class="preview-ft">
				<div class="preview-title">
					<p style="color: red;"><strong>因篇幅问题不能全部显示，请点此查看更多更全内容</strong></p>
					<div class="model-fold-cover-bd"><a href="https://www.tang5.com/mluggi/nreuoeuiuuv/" target="_blank"><span>查看全文</span><i class="iconfont icon-chakangengduo"></i></a></div>
				</div>
			</div>                
            <script type="text/javascript" src="https://jss.yule263.com/pc/wenzhang/detail_left.js"></script>
            </div>
            <div class="content_fy">
              
                
            </div>
        </div>
        <script type="text/javascript" src="https://jss.yule263.com/pc/wenzhang/detail_foot.js"></script>
        
        
        <script type="text/javascript" src="https://jss.yule263.com/pc/share_right_gg1.js"></script>
        <script type="text/javascript" src="https://jss.huatuo6.com/pc/share_right_xgzx.js"></script>
        <script type="text/javascript" src="https://jss.yule263.com/pc/share_right_gg2.js"></script>
        <script type="text/javascript" src="https://jss.huatuo6.com/pc/share_right_rmyd.js"></script>
    </div>
    <div class="n_right">
    <script type="text/javascript" src="https://jss.yule263.com/pc/share_cebian_gg1.js"></script>
    <script type="text/javascript" src="https://jss.huatuo6.com/pc/share_cebian_rmht.js"></script>
    <script type="text/javascript" src="https://jss.yule263.com/pc/share_cebian_gg2.js"></script>
    <script type="text/javascript" src="https://jss.huatuo6.com/pc/share_cebian_rmtw.js"></script>
    <script type="text/javascript" src="https://jss.yule263.com/pc/share_cebian_gg3.js"></script>
    <script type="text/javascript" src="https://jss.huatuo6.com/pc/share_cebian_wntj.js"></script>
    </div>
</div>

<p>Copyright © 2019-<span class="currentYear"></span> yule263.com 版权所有 <br> 
  <a href="https://beian.miit.gov.cn/" target="_blank">湘ICP备2023023988号-1</a></p>
</div>

</script>

第5章 计算机 表单

第5章计算机表单