form 的使用

http://localhost:63342/%E5%8B%BF%E5%8A%A8/iframe_demo/form_demo.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单标签的使用form</title>
</head>
<body>
    <!--如果需要与页面进行交互,提交一些数据到服务器,需要使用表单 form
    action:提交给谁取处理,通常就是服务器端程序地址
    method:两种方式
        post:可以传递的数据量大  安全 比如 登录/注册/下单等适合post
        get: 可以传递的数据量小  不超过2K  不安全 数据追加在url地址上 暴露出来
    -->
    <form action="" method="post">
        <!--表单元素的使用-->
        <!--type:hidden 隐藏 偷偷的携带一些数据到数据库-->
        <input type="hidden" name="text" value="textvalue">
        <!--type:text文本框 name:值对应的名字 传输时名值对一起传-->
        <!--maslength:最多输入的字符个数 size:控制宽度可以显示的字符个数-->
        用户名:<input type="text" name="username" maxlength="10"> <br>
        密 码:<input type="password" name="password"><br>
        <!--type:radio,单选框,一组:name必须一样,这样就只能选中一个-->
        性 别:<input type="radio" name="sex" value="m">男
        <input type="radio" name="sex" value="m">女<br/>
        <!--type:checkbox 多选框 一组name必须一样-->
        爱 好:<input type="checkbox" name="hobby" value="baskteball">篮球
        <input type="checkbox" name="hobby" value="swwing">游泳
        <input type="checkbox" name="hobby" value="singing">唱歌
        <input type="checkbox" name="hobby" value="listen music">听音乐<br>
        <br>
        <!--select:列表框 size:可以直接看到的项数 multiple:多选  默认单选-->
        城 市:<select name="city" size="3">
        <!--option:列表的项 value 必须给 传给服务器的值 元素中间的文本显示的项内容-->
        <option value="zhengzhou">郑州</option>
        <option value="zhoukou">周口</option>
        <option value="anyang">安阳</option>
        <option value="kaifeng">开封</option>
        </select><br>
        <br>

        <!--select 下拉框  不能加 size 和multiple-->
        城 市:<select name="city">
        <!--option:列表的项 value 必须给 传给服务器的值 元素中间的文本显示的项内容-->
        <option value="zhengzhou">郑州</option>
        <option value="zhoukou">周口</option>
        <option value="anyang">安阳</option>
        <option value="kaifeng">开封</option>
        </select><br>
        <br>


        <input type="file">


        <input type="button" value="上传文件" disabled><br><!--disabled:不让使用-->
        <br>

        <!--type:submit 提交按钮 value 可以改变按钮的文字-->
        <input type="submit" value="确认提交">
         
         
           <!--空格-->
         
         
        <!--type:reset 重置按钮-->
        <input type="reset" value="重新填写"><br>
        <br>
        请输入您的建议:<textarea rows="4" cols="50">我来说一句</textarea>
        <br>
        <br>
      <!--button标签:按钮 和input 可以实现一样的按钮效果  比input更强大
        注意:按钮的内容在元素的内容区指定,可以指定为图片-->
        <button type="submit" name="submit">提交</button>
        <button type="reset" name="reset">重置</button>
        <button type="button" name="btn1">普通按钮</button>

    <embed src="../文件/a.mp3 ">

    </form>
</body>
</html>

  ../    从父文件夹开始

posted @ 2017-02-14 09:42  john。  阅读(338)  评论(1编辑  收藏  举报