【HTML】表单-CSDN博客

本文链接：https://blog.csdn.net/weixin_45532220/article/details/117969107

表单：获取用户输入的手段

登陆的case

<body>
	<form target="_blank" action="XXX" method="post" autocomplete="off">
		<!--autocomplete="off"不会保存上一次填充内容，默认为on-->
		<!--引申get和post的区别-->
	<filedset>
		<legend>分块的标题</legend>
		<label>name:<input type="text" name="name" value="ivy" autocomplete="on"></label><br><br>
		<!--value为默认值-->
		<label>password:<input type="text" name="password" autofocus></label><br><br>
				<!--autofocus自动聚焦-->
				<!--label包裹input会自动聚焦，隐性关联,or下面通过id进行显式关联-->
	</filedset>
<!--legend作为fieldset的第一个子元素，作为一个子域的标题>
		<label for="email">email:</label><input type="text" name="email" readonly id="email"><br><br>
				<!--元素只读，但会被form data提交-->
		<label for="sex">email:
			<select name="sex">
				<option value="male">male</option>
				<option value="female">female</option>
			</select>
			<!--select和option结合进行单选实现-->
       </label><br><br>	
				<optgroup label="">
					<option></option>
					<option></option>
	                <option></option>
					<option></option>
				</optgroup>
				<!--针对下拉选项分组选择-->
		<button type="submit" disabled>submit</submit>
				<!--disabled置灰，不可点form data不提交-->

		<button type="reset">reset</submit>
	
	<!--submit的属性关注，可以覆盖表单的一些属性-->
		<button type="submit" formmethod="get">get</submit>
		<button type="submit" formmethod="post">post</submit>

	</form>
</body>

关于input
input是一个单标签元素,实现点击按钮的功能

<input type="submit" value="submit">
<input type="reset" value="reset">
<input type="button" onclick="msg()"value="click me! ">
<!--msg()是一个脚本-->

input一些type属性

<!--radio实现单选-->
<label><input type="radio" name="sex" value="male"></label>
<label><input type="radio" name="sex" value="female"></label>
<!--同一个name才会实现互斥单选-->

<!--checkbox实现多选-->
<input type="checkbox" name="name[]"value="bob">BOb
<input type="checkbox" name="name[]"value="amy">Amy
<input type="checkbox" name="name[]"value="ivy">Ivy

<!--实现时间和日期-->
<label>time:<input type="time" name="time"></label><br><br>
<label>data:<input type="data" name="data"></label><br><br>
<label>month:<input type="month" name="month"></label><br><br>
<label>week:<input type="week" name="week"></label><br><br>
<label>local:<input type="datatime-local" name="datatime-local"></label><br><br>

input实现搜索框样式

<label>工单编号：<input type="search" name="search"></label>
<!--颜色选择框-->
<label>颜色选择：<input type="color" name="color"></label>
<!--图像按钮的实现-->
 <label><input type="image" src="XXX.png" alt="图片描述"></label>
<!--隐藏input元素-->
 <label><input type="hidden" value="看不到" disabled></label>