前端基础-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]);
}