目录
效果
基础知识
标签
①
②
代码
效果
基础知识
表单控件 | 用户所填写的信息 |
提示信息 | 提示用户需要填的信息 |
表单域 | 包含表单元素的区域 |
标签
①
<form action="" method="">
</form>
<form>标签确定了一个表单域,我们的表单就是在这里面写的,其中
<form>标签的属性含义 action 用户信息的存储地址 metho 提交方式 等等
- 这里我们只看基础部分,所以具体的地址和提交方式我们先不管
②
输入表单元素
<input type="" name="" value="">
<input>标签的属性介绍
- type=""
text 文本框 hidden 定义隐藏输入字段 password 密码框 submit 提交到服务器 reset 重置数据 image 图像形式的提交数据 checkbox 定义复选框(多选) radio 定义单选框 name=""与value=""
两者都是给开发人员看的,不是所有的我们基础都要写的,不过在定义单选和复选时要给name赋同样的值,这样才能实现效果(理解:同一个名字表明是在同一个控件中做出选择)
代码
与前面提到的标签一结合,就可以得到效果中所展示的啦~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>虚假的影迷注册网站</title>
</head>
<body>
<h1>虚假的影迷注册网站</h1>
<form action="" method="">
<h3>请选择您的性别</h3><br />
男<input type="radio" name="sex" /> 女<input type="radio" name="sex" /> 沃尔玛塑料袋<input type="radio" name="sex" />
<h3>定义您的昵称</h3>
<input type="text" name="" id="" value="" />
<h3>定义您的密码</h3>
<input type="password" name="" id="" value="" />
<h3>点击一张您最爱的照片,生成个性化页面</h3>
<input type="image" src="./img/5人。2.jpg" width="100" />
<input type="image" src="img/5人酷背景.jpg" width="200" />
<input type="image" src="img/你好.jpg" width="150" />
<h3>请选择您在银河护卫队中喜欢的角色(可多选)</h3><br />
星爵<input type="checkbox" name="juese" id="" value="" /> 火箭<input type="checkbox" name="juese" id="" value="" />
毁灭者德拉克斯<input type="checkbox" name="juese" id="" value="" /> 格鲁特<input type="checkbox" name="juese" id="" value="" />
其他<input type="text"/>
</form>
</body>
</html>
今天的分享到这里结束啦~希望能帮到您!<・)))><<