標籤

css&javascript html5初步應用(一)

這是試做以了解html5的新屬性或新功能
東西很簡單，相信下圖類似的表格一定很常見
不過其中的驗證身份證、驗證信箱
必填欄位、提示訊息、複選選項、單選選項等等
都是基本必須了解的應用



html中body的程式碼：

<body>
    <h1>填寫資料</h1>
    <form id="Form1" action="http://tw.yahoo.com" onsubmit="return CheckForm()" method="post">
        <!--註解------------------------------------------------------
            action=       要轉去的地方
            onsubmit =    表單按下提交，先去 CheckForm()檢查，若return為false則不繼續提交
            method="get"  傳統網頁間資料交換方式，不太安全因為輸入的資料都會在網址列上
            method="post" 相對get，post較為安全，會將資料隱藏在標頭檔提交                
        -->

    <p>
        <input id="Btn1" type="button" value="按鈕" />
        <input id="TT" type="text" value="" />
    </p>
    <p>
        <input id="Text1" type="text" value="aaaa" required="required" title="請填寫姓名" placeholder="按一下填寫姓名" /></p>
    <p>
        <input id="Text2" type="text" value="" pattern="" required="required" title="請填寫身分證" placeholder="按一下填寫身分證" /></p>
        
        <!--註解------------------------------------------------------
            type="text" 這是文字框，由使用者輸入
                        有很多種type，常用的有button
                        password、submit、reset等等
            value=""    用在javascript傳輸的值
            pattern=""  可在裡面放入正則表示式
            required    必填欄位
            title=""    滑鼠移入不動時會顯示的提示
            placeholder 在使用者輸入框內顯示提示，灰灰的字
             -->
    <p>
        <input id="Password1" type="password" required="required" value="" /></p>
    <p>        
        <input id="MaleRadio" name="sex" type="radio" value="公" />
        <label for="MaleRadio">男生</label>          
        <input id="FemaleRadio" name="sex" type="radio" value="母" />
        <label for="FemaleRadio">女生</label>
        <!--註解------------------------------------------------------
            以上2個radio為同組，不太可能是男生又是女生
            所以為了獨一性，2個屬性的 name = "sex"
            而其下的label裡包的男生or女生由於包在label標籤中
            使javascript可以找出該label並做變化
        -->
    </p>
    <p>
        <input id="CheckBox1" name="Habbit" type="checkbox" value="游泳" />
        <label for="CheckBox1">游泳</label>
        <input id="Checkbox2" name="Habbit" type="checkbox" value="爬山" />爬山
        <input id="Checkbox3" name="Habbit" type="checkbox" value="睡覺" />睡覺
        <input id="Checkbox4" name="Habbit" type="checkbox" value="看電影" />看電影
        <!--註解------------------------------------------------------
            以上4個CheckBox為同組，屬性 name = "Habbit"
         -->

    </p>
    <p>
        <select id="Edu" name="Edu">
            <option value="幼稚園">幼稚園</option>
            <option value="國小">國小</option>
            <option value="國中" selected="selected" >國中</option>
            <option value="高中">高中</option>
            <option value="大專">大專</option>
            <option value="研究所">研究所</option>
        </select></p>
        <!--註解------------------------------------------------------
            以上為select標籤包住的選項，會顯示單選的目錄
            selected="selected" 是預設選項
            value="研究所"      由於選項是沒有值的，必預定義value為何
        -->



    <p><input type="date" id="" name="" value="" /></p>
    <p><input type="number" id="" name="" value="" /></p>
    <p><input type="email" id="" name="" value="" /></p>
        <!--註解------------------------------------------------------
            以上為特別的type，第1個是日期，第2個是數字，第3個是email格式
            html5新出的type，要視瀏覽器的新舊廠牌，有可能不支援
        -->
        
    <p></p>
    <p>
        <input id="Checkbox5" type="checkbox" />勾選才能送出</p>
    <p>
        <input id="SubmitBtn" type="submit" value="送出" disabled="disabled" /> 
        <input id="ResetBtn" type="reset" value="重設" />
    </p>
    
    </form>
</body>


html中head的程式碼：

<script src="/scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        //---------------------------------------------------------
        //當id= CheckBox1 變化時
        //如果該prop()是選中的狀態"checked"，改變next的text
        //prop是property，屬性的意思
        $("#CheckBox1").change(function () {
            if ($(this).prop("checked"))
                $(this).next().text("去游泳");
            else
                $(this).next().text("游泳");
        });


        //---------------------------------------------------------
        //這是對應打勾後，才能讓button可以按
        //如果是打勾，將id為SubmitBtn的屬性移除 disabled
        //如果沒打勾，將id為SubmitBtn的屬性加上 disabled
        $("#Checkbox5").click(function () {
            if ($(this).prop("checked"))
                $("#SubmitBtn").removeAttr("disabled");
            else
                $("#SubmitBtn").attr("disabled", "disabled");
        });


        //---------------------------------------------------------
        //這是試做按下改變id為TT的屬性及由程式放入文字
        $("#Btn1").click(function () {

            $("#TT").css("width", "200px");
            alert($("#TT").css("width"));

            $("#TT").val("程式放進去的值");
            alert($("#TT").val());

        });

        /*
        //檢查由submit按鈕改到form的屬性 onsubmit="return CheckForm()"
        $("#SubmitBtn").click(function () {
            if (CheckForm())
                $("#Form1").submit();                
        });
        */
    });


    //---------------------------------------------------------
    //檢查
    function CheckForm()
    {
        var msg = "";
        //正則表示示，/^開頭，$/結尾
        var pp = /^[A-Za-z][12]\d{8}$/;

        if ($("#Text2").val() == "")
            //如果是空值
            msg += "* 請一定要填寫身分證\n";
        else if (!pp.test($("#Text2").val()))
            //如果正則表示沒有通過
            msg += "* 請填寫正確的身分證\n";
            

        var c1=$("#MaleRadio").prop("checked")?true:false;  
        var c2=$("#FemaleRadio").prop("checked")?true:false;
        if (!(c1 || c2))
            //如果「男生」或「女生」都沒有勾
            msg += "* 請選擇性別\n";     
            
        if (msg != "") {
            alert(msg);
            return false;
        }
        else
            return true;
    }
</script>
標籤：

留言

張貼留言

熱門文章