前端基础-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
  • 阅读 ( 21949 )
  • 分类:javascript

0 条评论

请先 登录 后评论
不写代码的码农
doublechina

IT

31 篇文章

作家榜 »

  1. 威猛的小站长 107 文章
  2. Jonny 65 文章
  3. 江南烟雨 33 文章
  4. - Nightmare 33 文章
  5. doublechina 31 文章
  6. HJ社区-肖峰 29 文章
  7. 伪摄影 20 文章
  8. Alan 14 文章