form

時間 2019-11-17

標籤 form 简体版

原文原文鏈接

---恢復內容開始---html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>from</title>
</head>
<style>
    form{
        width: 700px;
        margin: 0 auto;
    }
    h1{
        text-align: center;
    }
    .asd{
        width: 80%;
    }
    .asd span{
        width: 80px;
        display: inline-block;
        text-align: right;
        margin: 10px 0;
    }
    .headImg{
        display: none;
        width: 200px;
    }
    .sub{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: aquamarine;
        height: 60px;
        border-radius: 5px;
        box-shadow: 2px 2px 4px #888;
    }
    .sub .btn{
        background-color: #4CAF50;
        border-radius: 20px;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
</style>
<body>
    <form action="" method="post">
        <h1>我的信息</h1>
        <div class="asd">
            <span>姓名：</span><input type="text" name="xingming">
        </div>
        <div class="asd">
            <span>電話號碼：</span><input type="tel" name="tel" id="">
        </div>
        <div class="asd">
            <span>郵箱：</span><input type="email" name="email" id="">
        </div>
        <div class="asd">
            <span>生日：</span><input type="date" name="bir" id="">
        </div>
        <div class="asd">
            <span>個性簽名：</span><input type="text" name="sign">
        </div>
        <div class="asd">
            <span>性別：</span>男<input type="radio" name="six">女<input type="radio" name="six">
        </div>
        <div class="asd">
            <span>愛好：</span>
            籃球<input type="checkbox" name="like" id="">
            足球<input type="checkbox" name="like" id="">
            羽毛球<input type="checkbox" name="like" id="">
            乒乓球<input type="checkbox" name="like" id="">
        </div>
        <div class="asd">
            <span>喜歡的顏色：</span><input type="color" name="color" id="">
        </div>
        <div class="asd">
            <span>上傳頭像：</span><input id="files" type="file" name=""><img class="headImg" src="" alt="">
        </div>
        <div class="sub">
            <input class="btn" type="submit" value="提交">
            <input class="btn" type="reset" value="重置">
        </div>
    </form>
    <script>
        var f = document.getElementById('files')
        var img = document.getElementsByClassName('headImg')[0]
        f.onchange = function () {
            var files = f.files,
                reader = new FileReader();
            if(files && files[0]){
                reader.onload = function (ev) {
                    img.src = ev.target.result;
                }
                reader.readAsDataURL(files[0]);
                img.style.display = 'inline-block'
            }
        }
    </script>
</body>
</html>post

---恢復內容結束---flex

1. form-inline、form-control和form-group
2. Form Trigger Sequence Demo Form
3. [Angular2 Form] Reactive Form, FormBuilder
4. form
5. FORM
6. Form
7. form 表單 Django form表單
8. django form和form組件
9. 【FORM】【02】Form Builder簡介)
10. Django (Form)
更多相關文章...
• ASP Form 集合 - ASP 教程
• ASP.NET Web Forms - HTML 表單 - ASP.NET 教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。