INPUT输入框和按钮
2018-08-26 本文已影响12人
赵桓熠_科院
HTML基本格式
<!DOCTYPE html><!--HTML5版本-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
第一行<!DOCTYPE html>为DTD文档声明。
1.<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
2.<!DOCTYPE> 声明不是 HTML 标签，更不是注释，不区分大小写；它是指示 web 浏览器关于页面使用哪个 HTML 版本（例如HTML5）进行编写的指令。
第四行 <meta charset="UTF-8">
声明使用的字符集为UTF-8，大众化的选择，内容包含的多，可能加载时间比较长
input
明文输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1.<form> 标签用于为用户输入创建 HTML 表单。
2.表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
3.表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
4.表单用于向服务器传输数据。
5.action规定当提交表单时向何处发送表单数据。
-->
<form action="">
<!--换行符-->
<br>
<!--明文输入
type="text"-->
<p> 账号：<input type="text"></p>
<!--暗文输入
type="password"-->
<p> 密码：<input type="password"></p>
<p>====================有默认值的明/暗文输入=========================</p>
<!--有默认值的明/暗文输入
value="123456789"引号内为默认值-->
<p>账号：<input type="text" value="123456789"></p>
<p> 密码：<input type="password" value="123456789"></p>
<p>====================可多选（未定义name的单选框）====================</p>
<!--可多选（未定义name的单选框）-->
<p>性别：<input type="radio">男
<input type="radio">女</p>
<p>====================不可多选=====================================</p>
<!--不可多选
（已定义name的单选框，name内的内容自己定义，但要一致）-->
<p>性别：<input type="radio" name="Hello">男
<input type="radio" name="Hello">女</p>
<p>====================有默认值的单选框==============================</p>
<!--有默认值的单选框
checked完整应为checked="checked"但属性名和取值一样可只写一个-->
<p>性别：<input type="radio" name="Hello">男
<input type="radio" name="Hello" checked>女</p>
<p>====================多选框=======================================</p>
<!--多选框
-->
<p><input type="checkbox" checked>A
<input type="checkbox" >B
<input type="checkbox" checked>C</p>
</form>
</body>
</html>
效果：
aa.png
绑定
1.默认情况下文字和输入框是没有关联关系的，也就是说点击文字输入框不会聚焦，进行绑定即可。（使用Label标签）
2.格式
2.1将文字利用Label标签包裹起来。
2.2.给输入框一个id属性
2.3.在Label中添加for属性和输入框中的id进行绑定即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<!--不会聚焦-->
姓名：<input type="text">
<!--第一种聚焦方法-->
<label for="">
姓名：<input type="text">
</label>
<!--第二种聚焦方法-->
<label for="ABC">账号：</label> <input type="text"id="ABC">
</form>
</body>
</html>
按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- action的作用是告诉 把表单提交到那个服务器-->
<form action="http://www.baidu.com">
<!--定义name才能提交-->
<p><input type="text" name="1"></p>
<!--普通按钮-->
<p> <input type="button" value="点击我" onclick="alert('你好')"></p>
<!--图片按钮-->
<p> <input type="image" src="图片/按钮.png" onclick="alert('你好')" width="150"> </p>
<!--重置按钮用于清空表单中的数据-->
<p><input type="reset"></p>
<!--默认提交按钮 -->
<p> <input type="submit"> </p>
</form>
</body>
</html>
