INPUT输入框和按钮

作者: 赵桓熠_科院 | 来源:发表于2018-08-26 09:45 被阅读12次

Tailwind Component
INPUT输入框和按钮
vue监听input输入事件
fsLayui附件上传使用说明
网页制作-搜索框
2018-10-08Bootstrap04
React -- 父子组件通信props 和 onRef
自动化代码中操作按钮式的文件上传的总结
函数节流与函数防抖
input 离焦事件和点击事件冲突

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>