input标签、label标签、form标签
这是今天早上我主要学习的内容
<!-- input标签的属性 -->
<!-- name 控件名称 -->
<!-- value="" 输入框的值 -->
<!-- placeholder="" 占位符 -->
<!-- disabled 禁用表单控件 -->
<!-- readonly 让表单只读,无法输入 -->
<!-- autofocus 页面刷新时, 自动聚焦该表单控件 一个html页面中只能有一个该属性-->
<!-- checked 控件默认被选中状态 -->
<!-- alt="" 当type=image 处于对可访问性的考虑 -->、
<!-- accept=".ppt" 当type="file"时为文件域, 用来控制上传的文件类型 -->
<!-- autocomplete 用于表单的自动填充 on/off(开/关)-->
<!-- step="2" range类型和number类型, 数值递增递减的步长 -->
<!-- min="0" max="100" range类型和number类型,可以控制最大和最小值 (超出范围有提示)-->
<!--minlength=""输入框输入的最小长度 maxlength=""输入框输入的最大长度 -->
<h3>输入类型的输入框</h3>
<!-- type属性表示input的控件类型 -->
<input style="width: 100px; height: 100px;" type="text" value="单行文本输入框" autofocus> <br>
<input type="text" placeholder="单行文本输入框" name="username" > <input type="submit"></form>
<input type="password" placeholder="请输入密码" disabled> <br>
<input type="number" placeholder="请输入数字" name="a" step="4"> <br> (每次递增递减的值以4为单位)
<input type="number" placeholder="请输入数字" name="a" min="1" max="5"> <br> (数字最小为1,最大为5)
<input type="email" placeholder="请输入邮箱" value="houanz@163.com" readonly> <br>
<input type="tel" placeholder="请输入手机号码" pattern="^\d{11}$" > <br>
<input type="url" placeholder="请输入网址" > <br>
<input type="search" placeholder="搜索类型的输入框"> <br>
<!-- 按钮类型的输入框 -->
<h3>复选框</h3>
<div>
<div><input type="checkbox" checked> HTML </div>
<div><input type="checkbox"> JAVA</div>
<div><input type="checkbox"> C++</div>
<div><input type="checkbox"> python</div>
</div>
<hr>
<h3>单选框: 需要加上name属性</h3>
<input type="radio" name="sex" checked> 男
<input type="radio" name="sex"> 女
<hr>
<h3>按钮类型的input</h3>
<input type="button" value="button按钮">
<input type="submit">
<input type="reset">
<hr>
<h3>文件域</h3>
<input type="file" accept=".txt">
<h3>图像域 (本质还是一个提交按钮)</h3>
<input width="100px" height="100px" type="image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="这是百度logo">
<h3>隐藏域</h3>
<input type="hidden">
<hr>
<h3>其他的控件类型</h3>
<input type="color"> 颜色<br>
<input type="range" step="0.1" min="0" max="100"> 滑块<br> (step越小,滑块越流畅)
<input type="date"> 日期<br>
<input type="time"> 时间<br>
<input type="datetime-local" name="" id=""> 日期和时间 <br>
<input type="week"> 输入以年和周数组成的日期 <br>
<input type="month"> 输入年和月 <br>
label标签有两种用法,可以提高使用体验
label标签的两种用法:
id的关联:
<label for="id">点这里</label>
<input id="id" type="text" placeholder="请点击">
嵌套的关联:
<label> 点这里 <input id="id" type="text" placeholder="点击文字可以选择输入框"><label>
form表单的属性有:
<!-- action="数据的提交地址" 服务器地址 请求地址 -->
<!-- method="数据的提交方式" get(明文传输数据) post(密码不明文传输) -->
<!-- target="数据提交以后,如何打开新的页面?" _self(默认当前窗口打开) _blank(新窗口打开) _parent(iframe父窗口刷新) _top(刷新当前页面成新链接)-->
<form action="" method="get" target="_self">
<label for="uname">用户名:</label>
<input id="uname" type="text" placeholder="请输入用户名" name="uname" autocomplete="off"> <br>
<label for="upass">密码:</label>
<input id="upass" type="password" placeholder="请输入密码" name="upass" > <br>
<div>性别:
<label><input type="radio" name="sex" value="1" checked> 男</label>
<label><input type="radio" name="sex" value="2"> 女</label>
</div>
<div>爱好:
<label><div><input type="checkbox" name="hobby" value="吃饭">吃饭</div></label>
<label><div><input type="checkbox" name="hobby" value="旅游">旅游</div></label>
<label><div><input type="checkbox" name="hobby" value="LOL">LOL</div></label>
<label><div><input type="checkbox" name="hobby" value="学习">学习</div></label>
</div>
<input type="submit" value="提交数据">
<input type="reset">
</form>