首页 > Web开发 > 详细

html-4, form 表单 输入、传文件、单选、多选、下拉菜单、文本描述、重置、submit、按钮限制输入

时间:2018-09-17 18:31:16      阅读:170      评论:0      收藏:0      [点我收藏+]
<!--
    form
            HTTP协议
            action:提交的服务器网址
            method:get(默认)| post(应用:登录注册、上传文件)
            页面中的a img link 默认是get请求
            
            input
                type:
                    text: 文本输入框
                    password:密码输入框
                    file:文件按钮 提交文件的时候一定要用post 一定要给form标签添加 Enctype=‘multipart/form-data‘
                    submit:提交按钮  input 中一定有submit按钮才能提交跳转等任务
                    button:普通按钮
                name:提交到服务器端的key
                value: 显示的文本内容,与服务器端的value
                placeholder:文本代替
                
            placeholder  表单内显示的灰色提示语    
            type
                text  文本输入
                file  传入文件  注意传入文件定要使用post方式 因为网站栏输入大小有限
                        
            label   表单前的标语
                for:是与下面的某个表单控件的id属性进行关联
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--Enctype=‘multipart/form-data‘  提交文本一定给form 设置这一段-->
    <form action="" method="get" enctype="multipart/form-data">
        <!--
            placeholder  表单内显示的灰色提示语
            label        表单前的标语
            type
                text  文本输入
                file  传入文件  注意传入文件定要使用post方式 因为网站栏输入大小有限
        -->
        <p class="user">
            <label class="user_name">用户名</label>
            <input type="text" name="username" id="username" placeholder="请输入用户名">
        </p>
        <p class="pwd">
            <label class="user_pwd">用户名</label>
            <input type="text" name="password" placeholder="请输入密码">
        </p>

        <!--文件上传-->
        <p>
            <input type="file" name="mp3">
        </p>


        <!--单选  checked 默认-->
        <p>
            男:<input type="radio" name="sex" value="man">
            女:<input type="radio" name="sex" value="woman" checked>
        </p>

        <!--多选-->
        <p>
        爱好:<input type="checkbox" name="love" value="eat">吃饭
              <input type="checkbox" name="love" value="sleep">睡觉
              <input type="checkbox" name="love" value="bat">打豆豆
        </p>

        <!--下拉菜单单选   selected 默认-->
        <p>
             <select name="school">
                <option value="1">小学</option>
                <option value="2">初中</option>
                <option value="3">高中</option>
                <option value="4">大学</option>
                <option selected>研究生</option>
                </select>
        </p>

        <!--描述 即文本框 可以写文字的框-->
        <p>
            <h3>我的描述</h3>
            <textarea name="" id="" cols="60" rows="10"></textarea>
        </p>

        <!--重置、限制输入数字等按钮等按钮-->
        <p class="register">
            <input type="submit" value="注册">
            <input type="button" value="普通按钮">
            <!--重置会 将所选的按钮都变为初始状态-->
            <input type="reset" value="重置">
            <!-- 只允许输入数字 -->
            <input type="number">

            <button type="button">普通按钮</button>
        </p>

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

 

html-4, form 表单 输入、传文件、单选、多选、下拉菜单、文本描述、重置、submit、按钮限制输入

原文:https://www.cnblogs.com/Mr-wangxd/p/9663581.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!