<optgroup id="gajtf"></optgroup>
  • <meter id="gajtf"></meter>
    <mark id="gajtf"><ruby id="gajtf"></ruby></mark>

  • <small id="gajtf"><strong id="gajtf"></strong></small>
  • <mark id="gajtf"><button id="gajtf"></button></mark>
    <listing id="gajtf"><dfn id="gajtf"><s id="gajtf"></s></dfn></listing><label id="gajtf"><ruby id="gajtf"></ruby></label>
    <mark id="gajtf"></mark>

    前端基礎-09-form表單&json數據

    form表單&json數據

    前端基礎-form表單,json數據1.form表單常用標簽

    #完整的form表單標簽
    <form action="http://www.baidu.com" method="post">
    ----------------------------------------------------
    #method  請求方式有兩種:post,get
    #get請求:user=sdf&psd=sdf&gender=1
     參數會拼接到 https://www.baidu.com/?user=sdfsdf&psd=dfsa&gender=2
    #post請求: 
    #action 指定發送請求的地址
    ----------------------------------------------------
    
    #input框文本形式
        <input name="user" type="text"/>
    ----------------------------------------------------
    
    #input類型是password,輸入的不可見:
        <input name="psd" type="password" required/>
    ----------------------------------------------------
    
    #單選框,radio是單選按鈕
        <input name="gender" value="1" type="radio"/>男
        <input name="gender" value="2" type="radio"/>女
        <input name="gender" value="3" type="radio"/>保密
    ----------------------------------------------------
    
    #多選框,checkbox是復選框
        興趣:
        <input type="checkbox"/>唱歌
        <input id="dance" type="checkbox"/><label for="dance">跳舞</label> #加label標簽擴大可以點擊區域
        <input type="checkbox"/>看書
        <input type="checkbox" checked="checked"/>運動 #默認選中
        <input type="checkbox" disabled="disabled"/>逛街 #disabled是不可點
    ----------------------------------------------------
    
    #下拉框:
        <select name="" >
            <option value="1">1</option>
            <option value="2">2</option>
            <option selected value="3">3</option> #selected默認選中是3
            <option value="4">4</option>
            <option value="5">5</option>    
          </select>
    ----------------------------------------------------
    
    #多文本框輸入:
        <textarea name="" id="" cols="30" rows="10">
            </textarea>
    ----------------------------------------------------
    
    textarea {
    
        /*resize: none;*/
    / / 不能拉
        /*resize: horizontal; */
    / / 只能拉寬
        /*resize: vertical; */
    / / 只能拉高
    }
    ----------------------------------------------------
    
    #提交表單數據,會發送請求
        <input type="submit" value="注冊">
    ----------------------------------------------------
    
    #簡單的按鈕:
        <input type="button" value="我是一個按鈕">
    ----------------------------------------------------
    
    #類型reset,重置按鈕,會重置form表單中元素到初始值
        <input type="reset" value="重置">
    
    </form>
    ----------------------------------------------------
    

    完整運行代碼:

    <form action="http://www.baidu.com" method="post">
        <!--action 規定當前提交表單時向何處發送表單數據-->
        帳號:<input name="user" type="text"/><br/><br/>
        密碼:<input name="psd" type="password" required/><br/><br/>
        性別:
        <input name="gender" value="1" type="radio"/>男
        <input name="gender" value="2" type="radio"/>女
        <input name="gender" value="3" type="radio"/>保密<br/><br/>
        興趣:
        <input type="checkbox"/>唱歌
        <input id="dance" type="checkbox"/><label for="dance">跳舞</label>
        <input type="checkbox"/>看書
        <input type="checkbox" checked="checked"/>運動
        <input type="checkbox" disabled="disabled"/>逛街<br/><br/>
        下拉框:
        <select name="" >
            <option value="1">1</option>
            <option value="2">2</option>
            <option selected value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <!--option[value=$]{$}*9-->
        </select><br/><br/>
        個人說明:
        <textarea name="" id="" cols="30" rows="10">
    
            </textarea><br/><br/>
        提交:
        <input type="submit" value="注冊">
        <input type="button" value="我是一個按鈕">
        <input type="reset" value="重置">
    
    </form>
    

    2.JSON簡介

    JSON:輕量級的數據交互格式,它實際在傳輸的時候都是字符串?
    JSON:一種交互的格式,所有的語言基本上都有字符串,可以傳遞?
    js對象:是一種js數據類型,是js特有的,無法傳遞交互數據

    JSON語法規則:?
    1.json數據格式的屬性(鍵和字符串)的值都為雙引號?
    2.值:值:整數、浮點數(小數)、字符串、布爾、數組、對象(除了undefined/NaN)

    JSON用法

    #通過字符串來定義,key-value方式展示
    
    var jsonStr = '{"name": "Jack","age":18}';
    alert(jsonStr);
    
     #通過js對象轉換為字符串
        JSON在ES5標準中新添加的對象,支持IE8+
        JSON.stringify(js對象) 返回JSON
    var obj = {"name": "Jack","age":18};
    var x = JSON.stringify(obj); #對象轉json字符串
    alert(x)
    
    # JSON字符串解析js對象
    var jsonStr = '{"name": "Jack","age":18}';
    var obj=JSON.parse(jsonStr)#json字符串轉json對象
    console.log(obj)
    #遍歷取出對象中的值
    for (var key in obj) {
        console.log(key, obj[key]);
    }
    • 發表于 2017-12-04 14:30
    • 閱讀 ( 62893 )
    • 分類:javascript

    0 條評論

    請先 登錄 后評論
    不寫代碼的碼農
    doublechina

    IT

    31 篇文章

    作家榜 ?

    1. 威猛的小站長 119 文章
    2. Jonny 65 文章
    3. 江南煙雨 33 文章
    4. - Nightmare 33 文章
    5. doublechina 31 文章
    6. HJ社區-肖峰 29 文章
    7. 偽攝影 20 文章
    8. Alan 14 文章
    小喜通天报