前端学习日志0909

1表单基本元素

<!-- 
		form将输入元素设置到表单元素里

		action="http://www.baidu.com"
		action如果不写，就是提交数据给当前的地址服务器
		action属性用于将表单数据提交给到对应地址的服务器

		method="get" 
		提交数据发送给服务器的方法，将数据放置到url地址里，提交的数据是比较小的，效率会更高
		method="post"
		提交的数据是放到请求的正文里，提交数据更多，更安全，效率比get低
	 -->
	<form action="" method="post">
		<div>
			<!-- input设定输入框 type="text" 设置为文本类型 name="username"设置提交以什么数据进行提交 -->
			<!-- required必须设定有值 -->
			<!-- value就是直接设置输入框的值 -->
			<!-- readonly设置为只读 -->
			<!-- disabled禁用掉输入，此时提交数据将不包含它 -->
			<input type="text" name="username" value="admin" readonly>
		</div>
		<div>
			<!-- type="password" 密码类型，内容不直接显示 -->
			<input type="password" name="password" required>
		</div>
		<div>
			<label for="file">
				上传头像
				<!-- type="file"上传文件 -->
				<input type="file" name="imgfile" id="file">
			</label>
		</div>

		<div>
			<label for="color">
				请选择你喜欢的颜色
				<!-- type="color"选择颜色 -->
				<input type="color" name="color" id="color">
			</label>
		</div>

		<div>
			<label for="date">
				请选择你的出生年月日
				<!-- type="date"选择日期 -->
				<input type="date" name="date" id="date">
			</label>
		</div>

		<div>
			<label for="datetime">
				请选择约会的时间
				<!-- type="datetime-local选择具体时间 -->
				<input type="datetime-local" name="datetime" id="datetime">
			</label>
		</div>


		<div>
			<label for="score">
				请你对你自己的满意程度打分
				<!-- type="datetime-local选择具体时间
				
				-->
				<input type="range" name="score" id="score" min="0" max="10" step="1">
			</label>

		</div>

		<!-- type="submit"设定按钮的类型为提交类型。 -->
		<button type="submit">提交</button>
	</form>

2、实现百度的高级搜索

	<form action="https://www.baidu.com/s" method="get">
		<div>
			<label for="keyword">
				<span>包含以下全部关键词：</span>
				<!-- 预置文字,没有输入任何内容的时候，会显示的文字 -->
				<input placeholder="请输入搜索的内容" id="keyword" type="text" name="q1">
				<button>百度一下</button>
			</label>
		</div>
		<div>
			<label for="q2">
				<span>包含以下完整关键词：</span>
				<input id="q2" type="text" name="q2">
			</label>
		</div>
		<div>
			<label for="q3">
				<span>包含任意1个关键词</span>
				<input id="q3" type="text" name="q3">
			</label>
		</div>
		<div>
			<label for="q4">
				<span>包含以下全部关键词：</span>
				<input id="q4" type="text" name="q4">
			</label>
		</div>


		<div>
			<label for="rn">
				<span>选择每一页搜索结果的条数</span>
				<!-- select设定选项框 -->
				<select name="rn" id="rn">
					<!-- option设定选项 -->
					<option value="5">每页显示5条</option>
					<option value="10">每页显示10条</option>
					<option value="20">每页显示20条</option>
					<option value="30">每页显示30条</option>
					<option value="50">每页显示50条</option>
				</select>
			</label>
		</div>

		<div>
			<label for="lm">
				<span>限定要搜索的网页时间</span>
				<!-- select设定选项框 -->
				<select name="lm" id="lm">
					<!-- option设定选项 -->
					<option value="0">全部时间</option>
					<option value="1">最近1天</option>
					<option value="7">最近1周</option>
					<option value="30">最近1月</option>
					<option value="365">最近1年</option>
				</select>
			</label>
		</div>

		<div>

			<span>搜索网页的语言:</span>
			<!-- 单选框 -->
			<label for="ct0">
				<span>全部语言</span>
				<input id="ct0" type="radio" name="ct" value="0">
			</label>
			<label for="ct1">
				<span>简体中文</span>
				<input id="ct1" type="radio" name="ct" value="1">
			</label>
			<label for="ct2">
				<span>繁体中文</span>
				<input id="ct2" type="radio" name="ct" value="2">
			</label>
		</div>


		<!-- 多选选项框 -->
		<div>

			<span>搜索网页的文档类型:</span>
			<!-- 多选框 -->
			<label for="ft1">
				<span>PDF文档</span>
				<input type="checkbox" name="ft" id="ft1" value="pdf">
			</label>
			<label for="ft2">
				<span>word文档</span>
				<input type="checkbox" name="ft" id="ft2" value="doc">
			</label>
			<label for="ft3">
				<span>excel文档</span>
				<input type="checkbox" name="ft" id="ft3" value="xls">
			</label>
		</div>

		<div>
			<label for="q6">
				<span>限定要搜索的网站</span>
				<textarea placeholder="请输入要搜索的网站地址" name="q6" id="q6" cols="50" rows="10"></textarea>
			</label>
		</div>
	</form>