H5前端开发学习笔记——0x06表单标签
2018-07-09 本文已影响0人
夜莺之刃
本节大纲
- 课时44表单标签-input(掌握)
- 课时45表单标签-按钮(掌握)
- 课时46Label标签(掌握)
- 课时47dalist标签(了解)
- 课时48表单标签-H5(了解)
- 课时49表单标签-非input标签(掌握)
- 课时50表单练习上(理解)
- 课时51表单练习下(理解)
表单标签-input
什么是表单？
专门用来收集用户信息的
什么是表单元素？
也就是HTML的一些标签而已，只是他们比较的特殊，他们有特殊的外观和功能
表单的格式
<form>
<表单元素。。。。。。。。>
</form>
常见的一些表单元素
input标签
他有一个type属性，其取值不同，决定input标签的功能和外观的不同
<form >
<!-- 明文输入框 -->
账号<input type="text"><br>
<!-- 暗文输入框 -->
密码<input type="password"><br>
<!-- 为输入框设置默认值 -->
表单1<input type="text" value="admin"><br>
表单2<input type="password" value="admin"><br>
<!--
单选框
注意：
1.默认情况下，单选框不会互斥，若要实现互斥,我们需要给他们设置一个name属性，而且必须设置相同的值;
2.要想让单选框有个默认的选项，可以添加checked="checked"属性,但是属性和其值要是一致的话，可以只写属性，但在XHTML中，就不能只写一个，建议以后都写;
-->
性别:
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女<br>
<!--
复选框
- 要是想要有默认的选择的话，添加属性checked="checked"，用法同上
-->
您所统一的条款：<br>
<input type="checkbox" checked>1<br>
<input type="checkbox">2<br>
<input type="checkbox">3<br>
<input type="checkbox">4<br>
</form>
表单标签-按钮
<form action="https://www.baidu.com">
<!-- 明文输入框 -->
账号<input type="text"><br>
<!-- 暗文输入框 -->
密码<input type="password"><br>
<!-- button是按钮的意思，可配合js使用 -->
<input type="button" value="I am button" onclick="alert('Fuck me PLEASE!')"><br>
<!-- image是图片按钮的意思，和上面的用法一样，可以自定义按钮的样子，可配合js使用 -->
<input type="image" src="#" value="I am button" onclick="alert('Fuck me PLEASE!')"><br>
<!-- 重置按钮reset，它是用来清空表单中的数据的，注意：重置按钮有默认的按钮标题，叫做“重置”，可以用value修改 -->
<input type="reset">
<!-- 提交按钮，将表单的数据提交到服务器
注意：要想把数据提交上去，必须满足两个条件
1. 需要提交到那个服务器（可以通过form的action属性指定提交到哪个服务器）；
2. 就是需要提交的是什么（要想指定提交啥，就给需要提交的内容的标签内加上name）
-->
<input type="submit">
<!-- 隐藏域，它是不会展示出来的，是用来悄悄咪咪的收集用户的一些数据,submit后，下面的信息就是悄悄咪咪的添加了66666666的数据，到时候学js的时候会动态的操作 -->
<input type="hidden" name="CCC" value="66666666">
</form>
Label标签
<!--
默认情况下，文字和输入框是没有关联的，点击文字是不会聚焦到输入框的，那就需要文字和输入框进行绑定；
label标签就可以实现
绑定步骤：
1.用label包裹内容，为内容加上id
2.在label标签中的for属性中填写内容中的id
-->
<form action="">
<label for="account">
账户 <input type="text" id="account"><br>
</label>
<label for="pwd">
密码 <input type="password" id="pwd"><br>
</label>
<!--
或者是直接将文字和输入框包在label中
但是这种方法是有局限性的，就是不能任意自定义的绑定
-->
<label>
备注 <input type="text">
</label>
</form>
dalist标签
<body>
<!--
dalist标签：给输入框绑定候选项
-->
请输入你的车型: <input type="text" list="cars"><br>
<datalist id="cars">
<option>宝马</option>
<option>奔驰</option>
<option>奥拓</option>
<option>三轮</option>
<option>步行</option>
<datalist>
</body>
表单标签-H5
<!--
H5提供了很多的input的type类型，但这些类型可能不是所有浏览器都能支持，现在就是了解一下；
其实，就是使用正则表达式给你校验一下你输入的内容
-->
<form action="">
邮箱： <input type="email">
域名： <input type="url">
<!-- number只能输入数字 -->
电话号码： <input type="number">
时间： <input type="date">
颜色： <input type="color">
<input type="submit">
</form>
表单标签-非input标签
<!--
1.select标签
作用：用于定义下拉列表
注意点：
- 下拉列表不能输入内容，但可以在列表中直接选择内容
- 可设置默认值,为option标签添加selected="selected"
- 可以给option包裹一个opgroup标签，实现内容的分组
-->
<!-- <select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="" selected="selected">5</option>
</select> -->
<select name="" id="">
<optgroup label="北京">
<option value="">朝阳区</option>
<option value="">昌平区</option>
</optgroup>
<optgroup label="其他">
<option value="">朝阳区</option>
<option value="">昌平区</option>
<option value="">天河区</option>
<option value="">张店区</option>
<option value="" selected="selected">黄浦区</option>
</optgroup>
</select>
<br><br><br><br>
<!--
2.textarea标签
定义多行输入框
注意点：
- 默认情况下，输入框可以无限换行，有自己的宽度和高度，cols是宽几个字，rows是行数
- 默认情况下，输入框是可以手动拉伸的，用css是可以改变的
-->
<textarea name="" id="" cols="30" rows="10"></textarea>
表单练习
- 在表单标签中，除了按钮标签以外的标签，都可以为他们附上value的属性为他们赋值，并提交到服务器，比如单选或者复选框，需要为其赋值才行，否则提交上去的都是一堆on
- 为表单加上边框与边框说明：
<fieldset> <legend>注册界面</legend> <form> ... </form> </fieldset>
