00:00
【H5教程-2.4.1小节】
1. HTML5表单的创建
HTML表单
1.表单用于不同类型的用户输入
2.常用表单标签:
<form> 表单
<input> 输入域
<textarea> 文本域
<label> 控制标签
<fieldset> 定义域
<legend> 域的标题
<select> 选择列表
<optgroup> 选择组
<option> 下拉列表中的选项
<button> 按钮
3.常用
复选框
单选按钮
下拉列表
文本域
创建按钮
[html] view plain copy print?
-
<form>
-
用户名:
-
<inputtype=”text”>
-
<br>
-
密码:
-
<inputtype=”password”>
-
<br>
-
你喜爱的水果?(复选)<br>
-
APPLE<inputtype=”checkbox”>
-
BANANA<inputtype=”checkbox”>
-
PEAR<inputtype=”checkbox”><br>
-
性别(单选)<br>
-
男<inputtype=”radio”name=”sex” checked>
-
女<inputtype=”radio”name=”sex”>
-
<br>
-
选择m*(下拉列表)
-
<select>
-
<option>m1</option>
-
<option>m2</option>
-
<option>m3</option>
-
<option selected>mm</option><!–默认–>
-
</select>
-
<br>
-
<inputtype=”button”value=”按钮”>
-
<inputtype=”submit”><!–默认文字不同浏览器不同,测试IE10为”提交查询内容”,Chrome为提交–>
-
</form>
-
<textareacols=”30″rows=”10″>文本域,cols行,rows列</textarea>
2. PHP环境搭建
可以用PHPStorm配置,也可以用xampp启动Apache
对于工作空间在/xampp/htdocs下的,如E:xampphtdocsPHPTESTservice.PHP
可以用PHPStorm直接访问获得访问地址,如
http://localhost:63343/htdocs/PHPTEST/service.php
也可以用Apache开启服务后的访问地址,如
http://localhost/PHPTEST/service.php
3. HTML5表单与PHP交互
最简单的表单,采用get方式提交,action是PHPStorm得到的:
[html] view plain copy print?
-
<formaction=”http://localhost:63343/htdocs/PHPTEST/service.php”method=”get”>
-
用户名:
-
<inputtype=”text”name=”Tname”>
-
<br>
-
密码:
-
<inputtype=”password”name=”Tpassword”>
-
<br>
-
<inputtype=”submit”value=”提交”>
-
</form>
服务端:
[php] view plain copy print?
-
<?php
-
echo'GET方式可以做资源定位,如淘宝商品用id定位<br>用户名:'.$_GET['Tname'].'<br>密码:'.$_GET['Tpassword'];
第二种方式,用Apache的服务,post方式提交:
[html] view plain copy print?
-
<formaction=”http://localhost/PHPTEST/service.php”method=”post”>
-
用户名:
-
<inputtype=”text”name=”Tname”>
-
<br>
-
密码:
-
<inputtype=”password”name=”Tpassword”>
-
<br>
-
<inputtype=”submit”value=”提交”>
-
</form>
服务端:
[php] view plain copy print?
-
<?php
-
echo'POST方式较为安全<br>用户名:'.$_POST['Tname'].'<br>密码:'.$_POST['Tpassword'];
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
