初识CSS和HTML基础表单的制作

抠脚大汉在网络

已于 2023-10-24 09:26:45 修改

阅读量273

点赞数

分类专栏：前端 html css 文章标签： css html 前端 web 1024程序员节

于 2023-10-18 13:26:38 首次发布

本文链接：https://blog.csdn.net/weixin_70137901/article/details/133903535

版权

前端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

初识CSS和HTML基础表单的制作

文章目录

初识CSS和HTML基础表单的制作
基础表单源代码

客户端、浏览器、用户与服务器交互

从服务器获取信息
向服务器提交信息
- 传参

传参的三大方法GPC

GET
POST
Cookie

学习方法

遇到请求自问自答

什么请求方法访问了哪个页面提交了哪些参数

from表单标签

表单的所有内容都要在from标签里

从服务器角度讲，收集用户的输入数据。
从客户端角度来讲，向服务器提交数据的位置。

参数有

action

action 执行一般用来连接php文件决定要提交给哪个页面

method

method 方法用来决定提交参数的方法 post get等

target

target 在哪个页面打开

_blank:“” 浏览器新建页面打开提交表单

_self:“” 在当前页面打开

enctype

enctype提交数据的方式

multipart/form-data: 只有在文件上传的时候使用;

application/x-www-form-urlencoded:默认的提交方式

onsubmit事件点击时的事件

创建表单考虑四个因素

传参的方式GET 或POST；
参数的名字；
传参的页面；
提请内容的数据类型；

最常用的标签为input是一个单标签

iuput标签

属性

name、id

是标签的唯一标识符可以通过id、name来选中标签

value

代表表单元素控件的默认值；如果没有此属性，需要从用户获得

disabled

代表控件禁用；disabled = “disabled”

type类型用来区分文本框的类型。

text 文本框

password 输出的文本不可见

radio 单选框想达到单选功能需要每个单选框的name属性都要一致如图

在这里插入图片描述

checkbox 复选框每个复选框都要有name和value属性

data 日期框可以调用年月日的一个工具

select 与option连用对option里的数据进行一个选择

textarea 为文本域超大文本框 cols="“设置长度单位为字符 rows=”"设置宽度单位为字符 readonly只读属性，readonly = “readonly”。

file 为文件域上传文件调取本地的文件进行上传

button 为普通按钮 value=""为按钮里的内容

reset 为重置按钮对页面进行重置

submit 为提交按钮对页面进行提交提交到 action里的页面

css

css全称叫做层叠样式脚本（Cascading Style Sheets，CSS）

实现的效果是对页面进行布局添加色彩属性

在语句中使用css

在语句中使用css需要使用关键字style

定义css

如果定义css需要定义选择器，选择器分为元素选择器、类选择器、id选择器、集体选择器、属性选择器、后代选择器

选择器:在css中，选择器是选取设置元素的模式

元素选择器对所有定义的元素标签内部进行设置
类选择器对所有使用这个类的标签进行改变
id选择器锚点所定义的css对呀的id进行改变
集体选择器就是可以选择多个对象
属性选择器就类似于数组下标对他的属性进行锁定
后代选择器也是定位

css基本关键字

background-color: ; 设置背景颜色
width 设置宽度
height 设置高度
margin  设置显示位置
font-size 设置文字大小
font-family 设置字体
borber:设置边框宽度   solid 边框颜色  ;
border-radius: px  px  px  px ; 设置圆角
color  设置字体颜色
text -align 设置居中

导入css

在css文件夹新建一个css文件写入css代码
在这里插入图片描述

输入<link rel=“stylesesheet” href=“引用的地址”
在这里插入图片描述

基础表单源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<style>
			#title{
				margin: 5%44.2%;
			}
			#content{
				margin: -2%39%;
				font-size: 18px;
				font-weight: 500;
			}
			
			body{
				background-image: url(/作业/img/buttef.web);
			}
		</style>
	</head>
	<body>
		<div id="title">
			<h1>用户注册</h1>
		</div>
		
		<div id="content">
			<form method="post" action="" target="_blank" enctype="multipart/form-data">
			用户名:&nbsp;&nbsp;&nbsp;&nbsp;<input name="username" type="text"/><br />
			<label >密&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;<input name="passwd" id="passwd1" type="password"/></label>
				<br />
			<div style="margin: 1%-5%;">
				确认密码:&nbsp;&nbsp;
				<input name="passwd" id="passwd2" type="password"/>
				</div>
			<label for="radio">
				性&nbsp;&nbsp;&nbsp;别:&nbsp;&nbsp;&nbsp;&nbsp;
				</label>
					&nbsp;&nbsp;<input name="sex" type="radio" value="男"/>
					&nbsp;&nbsp;男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input name="sex" type="radio" value="女"/>&nbsp;女
			<br /><br />
			<div style="margin: 1%-5%;">兴趣爱好:&nbsp;&nbsp;&nbsp;
				<input name="interesting" type="checkbox"/>美女
				<input name="interesting" type="checkbox"/>帅哥
				<input name="interesting" type="checkbox"/>打游戏
				</div>
				<br />
					&nbsp;&nbsp;生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日:
					&nbsp;&nbsp;&nbsp;<input name="birthda" type="datetime-local"/>
			<br/><br/>
			&nbsp;&nbsp;籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯:
				&nbsp;&nbsp;&nbsp;<select >
				<option>省份</option>
				<option>山西</option>
				<option>北京</option>
				<option>山东</option>
				<option>河北</option>
				<option>河南</option>
				</select>省/市
				<select>
				<option>市/区</option>
				<option>太原</option>
				<option>昌平</option>
				<option>济南</option>
				<option>石家庄</option>
				<option>郑州</option>
				</select>市/区
				<br /><br />
				注册请遵守以下协议:
				<br /><br />
				<textarea id="protocol" cols="70" rows="3" disabled>
1.
2.
3.
				</textarea>
				<br />
				<input name="button" type="button" onclick="text()" value="普通按钮"/>
				&nbsp;&nbsp;
				<input name="release" type="reset" onclick="tanchuang()" value="重置"/>
				&nbsp;&nbsp;
				<input name="submit" type="submit" onclick="tanchuang2()" value="提交"/>
			</div>
		</form>
		</div>
	</body>
	
	<script type="text/javascript">
		
		function tanchuang(){
			alert("重置成功");
		}
		function tanchuang2(){
			alert("提交成功");
		}
	</script>
</html>