<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lemon搜索</title>
</head>
<body>
<!--form作用：同后台进行数据交互，将用户输入的内容传到后台-->
<!--form中action指明要传输的服务器地址-->
<form action="http://baidu.com" method="post">
用户名：<input type="text" > <br>
用户名readonly默认值为true不能输入：<input type="text" readonly><br>
用户名readonly=true不能输入：<input type="text" readonly="true"><br>
用户名readonly=false能输入：<input type="text" readonly="false"><br>
用户名disabled不可用：<input type="text" disabled><br>
<!--单选框:-->
<!--input中一定要有name, 写为相同的，才能在一套中控制-->
<!--单选框需要有value属性，才能通过form将选择的数据提交到后台-->
<p>我最喜欢的歌手
<input type="radio" name="favor_singer" id="zjl" value="周杰伦" readonly>周杰伦
<input type="radio" name="favor_singer" id="ljj" value="林俊杰" checked>林俊杰
<input type="radio" name="favor_singer" id="zhm" value="张惠妹" disabled>张惠妹
</p>
<!--多选框-->
<!--同一个前端页面中，id最好不要重复，单选框和多选框中的id不要重复。虽然不会对页面造成影响，但是不方便定位-->
<p>我最不喜欢的歌手
<!--多选框需要有value属性，才能通过form将选择的数据提交到后台-->
<input type="checkbox" name="dislike_singer" id="zjlA" value="周杰伦" readonly>周杰伦
<input type="checkbox" name="dislike_singer" id="ljjA">林俊杰
<input type="checkbox" name="dislike_singer" id="zhmA">张惠妹
</p>
<p>
按钮<input type="button" value="按钮"><br>
输入时间<input type="time"><br>
上传文件<input type="file"><br>
只能输入email格式<input type="email"><br>
只能输入数字格式<input type="number"><br>
显示密码格式<input type="password"><br>
</p>
<!--文本域-->
<textarea></textarea>
<!--select下拉框-->
<p style="color:red">下拉框选择你最喜欢的花：</p>
<select>这句话是不会显示的，想要显示提示信息，要放在p里。select里面只有option
<option>玫瑰</option>
<option>百合</option>
<option>牡丹</option>
</select>
<input type="submit">
</form>
<!--js也可以与后台进行交互-->
<script>
// js中使用双斜杠表示注释
function run(){
var a=1
if (a>10){
console.log("a-10")
return a-10;
}else if(a<10){
console.log("a+10")
return a+10;
}else {
console.log("a")
return a;
}
}
run();
alert("嘿嘿")
</script>
</body>
</html>
web页面组成之dom对象（上）
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- HTML 学习笔记 May 15，2017 dom编程开山篇、dom编程实例（乌龟抓鸡）、bom介绍.dom对象层...
