详解之一：PHP与Web页面的交互示例

表单

使用元素，并在其中插入相关的表单元素，即可创建一个表单。

表单结构：


…      //省略插入的表单元素

form标记的属性如下表：

表单（form）由表单元素组成。常用的表单元素有以下几种标记：输入域标记、选择域标记和、文字域标记等。</pre><p><span style="color: #ff0000"><strong>输入域标记<input></strong></span></p><p>输入域标记<input>是表单中最常用的标记之一。常用的文本框、按钮、单选按钮、复选框等构成了一个完整的表单。 <br/>语法格式如下：</p><pre class="brush:php;toolbar:false">
<input name="file_name" type="type_name">
</pre><p>参数name是指输入域的名称，参数type是指输入域的类型。在<input type="">标记中一共提供了10种类型的输入区域，用户所选择使用的类型由type属性决定。</p><p>下面举几个type属性例子:</p><p><strong>1、text</strong></p><pre class="brush:php;toolbar:false">








 <tr bgcolor="#FFCC33">
  <td width="103" height="25" align="right">文本框：</td>
  <td height="25" align="left"><input name="user" type="text" value="Bill" id="user" size="20" maxlength="100"></td>
 </tr>

<?php
header("Content-Type:text/html;  charset=gb2312");
?>

</pre><p>运行效果：</p><p style="text-align: center"></p><blockquote><p>name为文本框的名称，value是文本框的默认值，size为文本框的宽度，maxlength为文本框的最大输入字符数，可以通过id获取文本框的值。</p></blockquote><p><strong>2、password</strong></p><pre class="brush:php;toolbar:false">








 <tr bgcolor="#FFCC33">
  <td width="103" height="25" align="right">密码域：</td>
  <td height="25" align="left">
  <input name="pwd" type="password" value="1234567" id="password" size="20" maxlength="100">
  </td>
 </tr>

<?php
header("Content-Type:text/html;  charset=gb2312");
?>

</pre><p>运行结果：</p><p style="text-align: center"></p><blockquote><p>密码域，用户在该文本框中输入的字符将被替换为*显示，以起到保密作用。</p></blockquote><p><strong>3、file</strong></p><pre class="brush:php;toolbar:false">








 <tr bgcolor="#FFCC33">
  <td width="103" height="25" align="right">文件域：</td>
  <td height="25" align="left">
  <input name="file" type="file" enctype="multipart/form-data" id="upfile" size="20" maxlength="200">
  </td>
 </tr>

<?php
header("Content-Type:text/html;  charset=gb2312");
?>

</pre><p>运行结果：</p><p style="text-align: center"></p><blockquote><p>文件域，当文件上传时，可以用来打开一个模式窗口来选择文件。然后将文件通过表单上传到服务器，上传文件时需要指明表单的属性enctype=”multipart/form-data”才可以实现上传功能。</p></blockquote><p><strong>4、image</strong></p><pre class="brush:php;toolbar:false">








 <tr bgcolor="#FFCC33">
  <td width="103" height="25" align="right">图像域：</td>
  <td height="25" align="left">
  <input name="image" type="image" src="btn__details_praise_selected.png" id="img" width="40" height="40" border="0">
  </td>
 </tr>

<?php
header("Content-Type:text/html;  charset=gb2312");
?>

</pre><p>运行效果：</p><p style="text-align: center"></p><blockquote><p>图像域是指可以用在提交按钮位置上的图片，这副图片具有按钮的功能</p></blockquote><p><strong>5、radio</strong></p><pre class="brush:php;toolbar:false">








 <tr bgcolor="#FFCC33">
  <td width="103" height="25" align="right">单选按钮：</td>
  <td height="25" align="left">
    <input name="sex" type="radio" value="1" checked>男
    <input name="sex" type="radio" value="0" >女
  </td>
 </tr>

<?php
header("Content-Type:text/html;  charset=gb2312");
?>

</pre><p>运行结果：</p><p style="text-align: center"></p><blockquote><p>单选按钮，用于设置一组选择项，用户只能选择一项。checked属性用来设置该单选按钮默认被选中。</p></blockquote><p><strong>6、checkbox</strong></p><pre class="brush:php;toolbar:false">








 <tr bgcolor="#FFCC33">
  <td width="103" height="25" align="right">复选框：</td>
  <td height="25" align="left">
    <input name="checkbox" type="checkbox" value="1" checked>苹果
    <input name="checkbox" type="checkbox" value="1" checked>小米
    <input name="checkbox" type="checkbox" value="1" >三星
  </td>
 </tr>

<?php
header("Content-Type:text/html;  charset=gb2312");
?>

</pre><p>运行结果：</p><p style="text-align: center"></p><blockquote><p>复选框，允许用户选择多个选择项。checked属性用来设置该复选框默认被选中。</p></blockquote><p><strong>7、submit</strong></p><pre class="brush:php;toolbar:false">








 <tr bgcolor="#FFCC33">
  <td width="103" height="25" align="right">提交按钮：</td>
  <td height="25" align="left">
    <input name="submit" type="submit" value="提交">
  </td>
 </tr>

<?php
header("Content-Type:text/html;  charset=gb2312");
?>

</pre><p>运行结果：</p><p style="text-align: center"></p><blockquote><p>将表单的内容提交到服务器端</p></blockquote><p><strong>8、reset</strong></p><pre class="brush:php;toolbar:false">








 <tr bgcolor="#FFCC33">
  <td width="103" height="25" align="right">重置按钮：</td>
  <td height="25" align="left">
    <input name="reset" type="reset" value="重置">
  </td>
 </tr>

<?php
header("Content-Type:text/html;  charset=gb2312");
?>

</pre><p>运行结果：</p><p style="text-align: center"></p><blockquote><p>清除与重置表单内容，用于清除表单中所有文本框的内容，并使选择菜单项恢复到初始值。</p></blockquote><p><strong>9、button</strong></p><pre class="brush:php;toolbar:false">








 <tr bgcolor="#FFCC33">
  <td width="103" height="25" align="right">普通按钮：</td>
  <td height="25" align="left">
    <input name="button" type="button" value="注册">
  </td>
 </tr>

<?php
header("Content-Type:text/html;  charset=gb2312");
?>

</pre><p>运行结果：</p><p style="text-align: center"></blockquote><p><span style="color: #ff0000"><strong>选择域标记<select>和<option></strong></span></p><p>通过选择域标记<select>和<option>可以建立一个列表或者菜单。菜单的使用是为了节省空间，正常状态下只能看到一个选项，单击右侧的下三角按钮打开菜单后才能看到全部的选项。列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各选项。</p><p>语法格式如下：</p><pre class="brush:php;toolbar:false"><select name="name" size="value" multiple>
<option value="value" selected>选项1</option>
<option value="value">选项2</option>
<option value="value">选项3</option>
…
</select></pre><blockquote><p>参数name表示选择域的名称；参数size表示列表的行数；参数value表示菜单选项值；参数multiple表示以菜单方式显示数据，省略则以列表方式显示数据。</p></blockquote><p><strong>1、列表方式</strong></p><pre class="brush:php;toolbar:false">








 <tr bgcolor="#FFCC33">
  <td width="103" height="25" align="right">喜欢哪种编程语言：</td>
  <td height="25" align="center" >
    <select name="name" id="code">
      <option value="1" selected>Java语言</option>
      <option value="2">C语言</option>
      <option value="3">JS语言</option>
      <option value="4">PHP语言</option>
    </select>
  </td>
 </tr>

<?php
header("Content-Type:text/html;  charset=gb2312");
?>

</pre><p>运行结果：</p><p style="text-align: center"></p><blockquote><p>下拉列表框，通过选择域标记<select>和<option>建立一个列表，列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各选项。selected属性用来设置该菜单时默认被选中。</p></blockquote><p><strong>2、菜单方式</strong></p><pre class="brush:php;toolbar:false">








 <tr bgcolor="#FFCC33">
  <td width="103" height="25" align="right">喜欢哪种编程语言：</td>
  <td height="25" align="center" >
    <select name="name" id="code" multiple>
      <option value="1" selected>Java语言</option>
      <option value="2">C语言</option>
      <option value="3">JS语言</option>
      <option value="4">PHP语言</option>
    </select>
  </td>
 </tr>

<?php
header("Content-Type:text/html;  charset=gb2312");
?>

</pre><p>运行结果：</p><p style="text-align: center"></p><pre class="brush:php;toolbar:false">> multiple属性用于菜单列表"<select>"标记中，指定该选项的用户可以使用Shift和Ctrl键进行多选</pre><p><span style="color: #ff0000"><strong>文字域标记<textarea></strong></span></p><p>文字域标记<textarea>用来制作多行的文字域，可以在其中输入更多的文本。</p><p>语法格式如下：</p><pre class="brush:php;toolbar:false"><textarea name="name" rows=value cols=value value="value" warp="value">
  …文本内容
参数name表示文字域的名称；rows表示文字域的行数；cols表示文字域的列数（这里的rows和cols以字符为单位）；value表示文字域的默认值，warp用于设定显示和送出时的换行方式，值为off表示不自动换行，值为hard表示自动硬回车换行，换行标记一同被发送到服务器，输出时也会换行，值为soft表示自动软回车换行，换行标记不会被发送到服务器，输出时仍然为一列。
例如：








 
  请写下你的留言：
  
    留言...
  
 



运行结果：
相关学习推荐：编程视频
以上就是详解之一：PHP与Web页面的交互示例的详细内容，更多请关注 第一PHP社区 其它相关文章！
        

        
        
    


    

        

                        
html
                        
xml
                        
php
                        
服务器
                        
c语言
                    
    



    

        
写下你的评论吧 !
        

            

                吐个槽吧,看都看了
            
            

                

                                        会员登录 | 用户注册