第二次web前端学习笔记

学习目标：

学习掌握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>
			密&nbsp;&nbsp;码：<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>