表单

最新推荐文章于 2024-04-16 11:57:14 发布

婉菡

最新推荐文章于 2024-04-16 11:57:14 发布

阅读量88

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/gcyqweasd/article/details/113244766

版权

前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
		<!--
        	form标签:表单  用于收集和用户交互的信息
        	    method属性:设定表单提交的方式   get/post
        	    name属性:表单的名称
        	    action属性:设定表单提交的路径
        	input标签:
        	    type属性区分表单的类型:
        	        text:单行文本输入域    默认值
        	        maxlength:设定文本框允许输入的最大字符数
        	        value属性:代表默认值 
        	        password:密码输入域    数据暗文显示
        	                               其他使用方式同text
        	        file:文件上传控件
        	        hidden:隐藏域
        	        checkbox:复选框
        	            name属性:代表一组复选框,属性值应该相同
        	            value属性:是复选框提交时的值
        	            checked属性:复选框默认选中状态
        	        radio:单选按钮
        	            name属性:实现一组单选按钮的互斥效果
        	            value属性:是单选按钮提交时的值
        	            checked属性:单选按钮默认选中状态
        	                     三种按钮:
        	            button:普通按钮    没有默认效果
        	            reset:重置按钮    点击之后,会重置form表单,回到页面初始效果
        	            submit:提交按钮   默认提交form表单
        	        textarea标签:多行文本输入域
        	                               默认值书写在标签体部分,不是value属性
        	        select控件:下拉菜单 
        	                              每一个选项用option标签生成  option必须要有value属性  用于提交
        	            selected属性用于设定某一个属性默认选定的状态
        -->
        <style>
        	*{
        		margin: 0px;
				padding: 0px;
        	}
        	#input1{/*能用样式解决的不用属性*/
        		width: 260px;
				height: 30px;
				outline:none;/*获取焦点时文本框无变化*/
				font-size: 20px;
        	}
        	
        	#area1{
        		width: 200px;
				height: 100px;
        	}
        </style>
	</head>
	<body><!--action指定提交路径-->
		<form method="" name="" action="demo02.html">
			<div>
				用户名:<input type="text" id="input1" maxlength="10" value="12345"/>
			</div>
			<div>
				密码:<input type="password"/>
			</div>
			<div>
				头像:<input type="file"/>
			</div>
			<div>
				隐藏域:<input type="hidden"/>
			</div>
			<div>
				爱好:<input type="checkbox" name="hobby" value="1" checked="checked"/>学习1
				    <input type="checkbox" name="hobby" value="2"/>学习2
				    <input type="checkbox" name="hobby" value="3"/>学习3
			</div>
			<div>
				性别:<input type="radio" name="sex" value="男" checked="checked"/>男
				    <input type="radio" name="sex" value="女"/>女
			</div>
			<div><!--input标签已过时,现均使用button标签-->
				<input type="button" value="登录"/>
				<input type="reset" />
				<input type="submit" />
			</div>
			<div>
				<button type="button">登录</button>
				<button type="reset">重置</button>
				<button type="submit">提交</button>
				<button type="button"><!--也可使用图片作为按钮-->
					<img src="img/01.jpg" />
				</button>
			</div>
			
			<div>
				<textarea id="area1">默认值书写处</textarea><!--多行文本输入域,默认值写在标签体部分-->
			</div>
			
			<div>
				<select>
					<option value="1">11111</option><!--每一个代表一个选项,值写在标签体部分,每个option必须写value用于提交-->
					<option value="2" selected="selected">2222222</option><!--默认此项是被选中的-->
					<option value="3">33333333</option>
					<option value="4">444444</option>
				</select>
			</div>
		</form>
	</body>
</html>

在这里插入图片描述

婉菡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表单</title> <!-- form标签:表单用于收集和用户交互的信息 method属性:设定表单提交的方式 get/post name属性:表单的名称 action属性:设定表单提交的路径
复制链接

扫一扫

专栏目录