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