2021-03-11

最新推荐文章于 2024-10-05 16:51:11 发布

懒惰の峰少

最新推荐文章于 2024-10-05 16:51:11 发布

阅读量55

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_36870769/article/details/114658123

版权

主要内容：1、form表单

8.表单

	     <form action=””>
		</form>

	Action 表单要提交的地址

数据提交方式:
地址栏提交: get方式 username=aaad&upwd=123456
打包提交: post方式
Id: 当前标签的唯一标识
Class :类名匹配多个标签使用
Method 值 post get
如果表单控件要提交值到后台必须带name属性(js拼接除外)
文本框:
<input type=”text” value=”默认值” placeholder=”提示文字”/>
密码框:
<input type=”password”>
单选按钮:
<input type=”radio” name=”两个选项值必须一致”>
复选按钮:
<input type=”checkbox” name=”名称[]”>
下拉列表:
<select name=””> <option value=”要传入后台逻辑代码中的值”>要展示的文字</option> </select>
文本域:
<textarea cols=”宽(单位是显示字数)” rows=”高” name=”” > </textarea>
文件上传控件:
<input type=”file” />
多文件上传只需要添加multiple=“multiple”
时间相关控件
时间格式:Y-m-dTH:i:s

	 请输入日期: ```<input type="date" value="2021-03-10"/><br /> ```
	 请输入时间: ```<input type="time" value="23:50"/><br />```
	 请输入月份: ```<input type="month" value="2021-03"/><br />```
	 请输入第几周: ```<input type="week" value="2021-W09"/><br />```
	 请年月日时分: ```<input type="datetime-local" /><br />```
	邮箱控件: (默认验证邮箱格式)
	```<input type="email" >```
	网址控件(默认验证网址)
	```<input type=”’url”>	```
	颜色控件(默认验证颜色)	
	``<input type=”color”>
	
	<input type=”text” list=”datalist标签的id值”>
	<datalist id=”’id值”>
		<option></option>
	</datalist>

完整代码：


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- form
	数据提交方式: 
	地址栏提交: get方式  username=aaad&upwd=123456
	打包提交:	post方式 
	
	id 标签的唯一标识
	class 类  不唯一

	onfocus="onfocus" 获得焦点
	value  "设置默认值"
	placeholder 提示文字


	select 标签
	select>option
	option中的属性selected 默认被选中的选项

	世界时间格式
	Y-m-d H:i:s
	Y-m-dTH:i:s


	textarea
	cols 表示行(宽度)
	rows 表示列(高度)
	数值表示字符数

	提交按钮两种方式
	<button></button>
	<input type="submit" />

	重置标签:
		input type="reset"

	-->
	<form action="./demo2.html" method="get" name="form1" id="form1" class="">
		<filedset>
			<legend>个人调查</legend>
			<input type="text" name="week" list="we">
			<datalist id="we">
				<option value="星期一">星期1</option>
				<option value="星期二">星期2</option>
				<option value="星期三">星期3</option>
				<option value="星期四">星期4</option>
			</datalist>

			文本框:<input type="text" name="username"  placeholder="请输入用户名" /><br />
			密码框:<input type="password" name="upwd" /><br />
			请选择职业:
				<select name="occ">
					<option value="0">-请选择职业-</option>
					<option value="1">学生党</option>
					<option selected value="2">老司机</option>
					<option value="3">小清新</option>
				</select><br />

			 文件上传: <input type="file" name="file" multiple="multiple"><br />
			 请输入邮箱: <input type="email" ><br />
			 请输入地址: <input type="url" ><br />
			 请选择颜色: <input type="color" value="#ff0000"><br />
			 请输入日期: <input type="date" value="2021-03-10"/><br /> 
			 请输入时间: <input type="time" value="23:50"/><br />
			 请输入月份: <input type="month" value="2021-03"/><br />
			 请输入第几周: <input type="week" value="2021-W09"/><br />
			 请年月日时分: <input type="datetime-local" /><br />
			<hr />
			请选择性别: 男<input type="radio" name="sex" value="0"/>  女<input type="radio" name="sex" value="1"/> <br />
			请选择爱好:
						打篮球<input type="checkbox" name="hobby[]" value="0"/><br />
						踢足球<input type="checkbox" name="hobby[]" value="1"/><br />
						打乒乓球<input type="checkbox" name="hobby[]" value="2"/><br />

			请输入个人评价:<textarea name="pj" id="" cols="80" rows="10">
							
						</textarea>
			<!-- <input type="submit" value="登录"/> -->
			<button>提交</button>
			<input type="button" value="普通按钮" onclick="alert('别瞎点,点坏了呢')"/>
			<input type="image" src="./submit.gif"><br />
			<input type="reset" />
		</filedset>
	</form>
</body>
</html>