初学者→HTML-表单的学习

版权声明:未允许请务转载 https://blog.csdn.net/realize_dream/article/details/83422529

表单域:相当一个容器,用来容纳所有的表单控件和提示信息
                     在HTML中<form>常用标记用于定义表单域,只有在<form>才能实现用户的信息收集和专递,从而<form>内的全部内容交给了服务器
            1.表单作用:提交数据
                    表格:存放数据
                    常用属性:
                    name    表单名称
                    action  提交的地址
                    method  提交的方法
                    get     默认值
                    post    
                    get和post的区别
                    (1)get提交数据不安全,信息会在地址中显示,post相对安全
                    (2)get提交的的数据有限制,最大为2k,post理论上没有限制,合适大量数据      
            2。input控件
                        a。输入框:
                            type类型:<input typr=属性值"">
                                (1)text:收集少量的文本数据,用户可见的
                                (2)password:收集用户密码数据
                                (3)redio:单选框
                                (4)button:普通按钮
                                (5)submit;提交按钮
                                (6)checkbox:复选框
                                (7)type里面常用的属性:
                                name   输入框的名称
                                value  当前值
                                placeholder:是html5新增的属性,主要让表单更加智能,
                                placeholder:好处是当我们聚焦输入文本的时候我们在placeholder="默认值"的文本就会自动清空

相应的代码展现如下:

<html>
	<head>
		<title>表单学习</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<form action="" name="myfor" method="post">
			用户:
			<input type="text" name="username" value="" placeholder="用户名不能为空"/>
			<br /><br />
			密码:
			<input type="password" name="password" id="password" value="" placeholder="请输入正确的密码"/>
			<br /><br />
			<hr />
			<!--单选框-->
			性别:
			<input type="radio" name="sex"/>男
			<input type="radio" name="sex"/>女
			<br /><br />
			<hr />
			<!--多选框-->
			爱好:
			<input type="checkbox"/>跑步
			<input type="checkbox"/>旅行
			<input type="checkbox"/>健身
			<input type="checkbox"/>睡觉
			<input type="checkbox"/>看书
			<input type="checkbox"/>逛街
			<br /><br />
			<hr />
			<!--表单最后基于submit才能提交-->
			<input type="submit" name="" id="" value="登陆" />
			<input type="reset" name="" id="" value="取消" /><br />
		</form>
	</body>
</html>

运行结果;

标题

猜你喜欢

转载自blog.csdn.net/realize_dream/article/details/83422529
今日推荐