学习目标:
学习掌握web前端开发学习内容:
1、 学习表单元素 2、 学习input元素 3、 学习其他元素学习时间:
2021年1月3日学习产出:
提示:这里统计学习计划的总量
例如:
1、 技术笔记 1 遍
2、CSDN 技术博客 1 篇
3、 登录界面作业一份
课堂笔记
form表单
<!--
表单元素:form元素:
form元素中重要的属性:
1,action:url统一资源定位符
2,method:提交方式,提交方式目前常用的有两种(get/post)
3, enctype:编码方式
表单当中如果不具有表单控件通常情况是没有意义的,那么表单控件有哪些呢?
input元素:普通文本框,密码框,单选框,复选框,按钮,隐藏域,文件选择框
其他元素:标签,文本域,下拉框
-->
<form action="" method="" enctype="">
</form>
文本框
<!--
文本框:
value:给文本框设置的值
maxlength:文本框的最大长度
readonly:是否只读,默认为true
placeholder:设置用户提示信息
-->
用户名:<input type="text" value="" maxlength="12" placeholder="请输入用户名!"/><br>
密 码:<input type="password" value="" maxlength="16" placeholder="请输入密码" /><br>
手机号:<input type="text" name="" id="" value="15991629438" readonly /><br>
单选框和复选框
<!--
单选框和复选框
name:单选框和复选框的必须属性,依靠name来实现分组的,一组单选框或者复选框name属性值必须相同
value:单选框或者是复选框提交到服务器时的实际值
checked:设置默认被选中
-->
性别:<input type="radio" name="sex" id="" value="1" checked />男
<input type="radio" name="sex" id="" value="0" />女<br>
兴趣:<input type="checkbox" name="like" id="" value="1" checked />篮球
<input type="checkbox" name="like" id="" value="2" />听音乐
<input type="checkbox" name="like" id="" value="3" />阅读 <br>
按钮
<!--
普通按钮
-->
<input type="button" name="" id="" value="点击" />
<!-- 提交按钮-->
<input type="submit" name="" id="" value="登录" />
<!-- 重置按钮-->
<input type="reset" name="" id="" value="重置" /> <br>
文件选择框
<!-- 文件选择框-->
<input type="file" name="" id="" value="" /><br>
文本域和隐藏域
<!-- 隐藏域 -->
<input type="hidden" name="" id="" value="123" /><br>
<!-- 文本域
rows:指定文本域的行数
cols:指定文本域的列数
readonly:是否只读
文本域没有value属性,若需要添加默认文字,需要使用js
-->
备注:<textarea rows="4" cols="4" readonly="readonly">
</textarea><br>
下拉框
<!-- 下拉框
select:
-->
语言:<select>
<option value ="1">Java</option>
<option value ="2">C语音</option>
<option value ="3">Python</option>
</select><br>
标签
<!-- 标签
label:关联控件
for:给定关联控件的id
说明:在html当中id属性必须是全局唯一的
-->
<input type="radio" name="" id="rem" value="" />
<label for="rem">记住我</label>