HTML表单标签＜form＞＜/form＞登录窗口和单选框以及下拉栏的制作
文章速览：
HTML基础知识的学习+附加常用HTML标签
HTML中有序列表（＜ol＞＜li＞）和无序列表（＜ul＞＜li＞）以及定义列表的使用，以及利用无序列表制作网购按钮
HTML中图片的网页插入以及属性设置
HTML中＜a＞＜/a＞标签的四大功能 必看！必看！！必看！！！
HTML表单标签＜form＞＜/form＞登录窗口和单选框以及下拉栏的制作
登录窗口的制作：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<form method="GET" action="">
<input type="text">
<input type="password">
form>
body>
html>
form表单标签能够发生数据，能够把前端的数据发送给后端工程师
method有两个属性，分别是get和post，现在使用get，post是后面的Java高级的内容
action是发送的对象，填写后端的模拟地址
注意：
单独写出form 标签是不能完成发送数据的，需要配合其他组件共同使用，这个组件叫input标签，但是这仍然不行，需要在input 标签中加入一个属性 type
其中text代表的是输入框，password叫做密码框
说明：
前面的输入框可以随便写，而且能够显示出来
后面的密码框也能随便输入，但是显示不出来
将上面的代码稍微改写，使得两个框有提示信息
<body>
<form method="GET" action="">
用户名：<input type="text">
密码： <input type="password">
form>
body>
我们发现，登陆页面的用户名和密码都不在同一行，那么进行修改
<body>
<form method="GET" action="">
<p>用户名：<input type="text">p>
<p>密码： <input type="password">p>
form>
body>
但是我们发现，输入了信息却还没有提交键，进行修改：
<body>
<form method="GET" action="">
<p>用户名：<input type="text">p>
<p>密码： <input type="password">p>
<input type="submit">
form>
body>
登录的组件是input，，写上submit是提交
其实上面的提交两个字是可以更改的，只需要增加一个属性即可：
<input type="submit" value="login">
对于上面的代码是不能够提交成功的，因为提交成功必须要有数据名和数据值，缺一不可
对于上面的用户名和密码是数据值，这个时候还缺少数据名
对上面的代码修改，增加数据名：
<body>
<form method="GET" action="">
<p>用户名：<input type="text" name="username">p>
<p>密码： <input type="password" name="password">p>
<input type="submit" value="login">
form>
body>
上面的name属性中的内容可以随便写
点击提交怎么才知道提交成功呢？
上面的制作基本完成，那么能不能更加完善一下呢？
<body>
<form method="GET" action="">
<p>用户名：<input type="text" name="username" value="请输入用户名">p>
<p>密码： <input type="password" name="password">p>
<input type="submit" value="login">
form>
body>
但是，上面的用户名框，当鼠标点击的时候，”请输入用户名“字体并不会消失
<p>用户名：<input type="text" name="username" value="请输入用户名" onfocus="this.value='' ">p>
上面的 onfocus 属性是聚焦的意思，当鼠标点击的时候会发生什么变化，我们想让字体消失，那么就修改成了上面的代码。但是当上面的聚焦完后，当鼠标移走的时候，，原本未聚焦的时候的提示信息会消失，进行修改：
<p>用户名：<input type="text" name="username" value="请输入用户名"
onfocus="this.value='' " onblur="请输入用户名" >p>
onblur属性是重新返回未聚焦状态，并提示内容，但是，当已经输入好了用户名，再次返回未聚焦的状态是，原本写的用户名就没有了，所以不够完善，再次进行修改：
<p>用户名：<input type="text" name="username" value="请输入用户名"
onfocus="this.value='' " onblur="if(this.value==''){this.value='请输入用户名'}" >p>
解决了上面的问题，但是还有一个问题，那就是当输入好用户名的时候，进行未聚焦用户名框，然后再次聚焦用户名框，用户名框的内容再次消失，那么继续改进：
<p>用户名：<input type="text" name="username" value="请输入用户名"
onfocus="if(this.value=='请输入用户名'){this.value=''} " onblur="if(this.value==''){this.value='请输入用户名'}" >p>
那么上面的制作就基本完成了，问题也解决了。需要再次完善一下啊：
让未聚焦的时候字体是灰色的：
<p>用户名：<input type="text" name="username" value="请输入用户名" style="color: #999;"
onfocus="if(this.value=='请输入用户名'){this.value=''} " onblur="if(this.value==''){this.value='请输入用户名'}" >p>
但是当聚焦的时候，发现输入的用户名也变成了灰色，继续更改：
<p>用户名：<input type="text" name="username" value="请输入用户名" style="color: #999;"
onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#424242'} "
onblur="if(this.value==''){this.value='请输入用户名' ; this.style.color='#999'}" >p>
这样整体的登录窗口就制作完成了
单选框的制作：
<body>
<form method="GET" action="">
<input type="radio">
<input type="radio">
<input type="radio">
<input type="submit">
form>
body>
说明：单选框的属性是 radio
将上面的代码添加一些人为信息：
<body>
<form method="GET" action="">
你喜欢吃哪一个水果？
<p> 1、苹果 <input type="radio"> p>
<p> 2、香蕉 <input type="radio"> p>
<p> 3、荔枝 <input type="radio"> p>
<input type="submit">
form>
body>
但是，发现上面的并不是单选，而能够多选，下面修改：
<body>
<form method="GET" action="">
你喜欢吃哪一个水果？
<p> 1、苹果 <input type="radio" name="star"> p>
<p> 2、香蕉 <input type="radio" name="star"> p>
<p> 3、荔枝 <input type="radio" name="star"> p>
<input type="submit">
form>
body>
上面的就能进行单项选择了
这是因为name属性就是用来统一他们是在哪一个选择题里面的
把这几个选项的name属性设置为一个统一的值，那么就成了一个选项了
注意：
如果想再写一个选择题的话，下一道题的name属性的值就需要与上面的所有的name属性的值不同
上面的还不能够提交成功，因为有了 name 数据名了，还缺少数据值，更改如下：
<body>
<form method="GET" action="">
你喜欢吃哪一个水果？
<p> 1、苹果 <input type="radio" name="star" value="pingguo"> p>
<p> 2、香蕉 <input type="radio" name="star" value="xiangjiao"> p>
<p> 3、荔枝 <input type="radio" name="star" value="lizhi"> p>
<input type="submit">
form>
body>
上面的是单选框，其实只需要稍微的改动就可以变成复选框（小小的正方形框，此时可以多选）
<p> 1、苹果 <input type="checkbox" name="star" value="pingguo"> p>
<p> 2、香蕉 <input type="checkbox" name="star" value="xiangjiao"> p>
<p> 3、荔枝 <input type="checkbox" name="star" value="lizhi"> p>
上面中type属性写 checkbox 就是代表的复选框
上面的选择题已经制作成功了，但是现在这个时代，人们多多少少有很大的惰性，为了方便，可以设置一个已经选择好的默认选项，当人们看到这个默认选项就是他想选择的选项的时候，就不需要再去选择，例如，选择性别的时候，只有男女可分，那么默认是男，当是男生进行选择的时候，就不需要再去选择，所哟这个功能还不错，现在来写一下：
<h2>
选择性别：
h2>
man：<input type="radio" name="sex" value="nanren" checked="checked">
woman：<input type="radio" name="sex" value="nvrens">
上面使用了check’se
下拉栏的制作：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<h1>请选择你目前的居住地：h1>
<form method="GET" action="">
<select>
<option >北京option>
<option >上海option>
<option >天津option>
<option >山东option>
<option >山西option>
<option >河南option>
select>
<input type="submit">
form>
body>
html>
下拉栏的制作用到的还是form标签
只是使用了select选择标签进行选择
option标签是选择权的意思，后面写的省份名进行选择
但是要想提交数据，需要数据名与数据值，上面需要数据名：
<select>
<option name="shengfen" >北京option>
<option name="shengfen" >上海option>
<option name="shengfen" >天津option>
<option name="shengfen" >山东option>
<option name="shengfen" >山西option>
<option name="shengfen" >河南option>
select>
我们发现，因为这是单选题，这样写了那么多一样的name属性，很不方便，同时又提供了select标签，所以改进：
<select name="shengfen">
<option "">北京option>
<option "">上海option>
<option "">天津option>
<option "">山东option>
<option "">山西option>
<option "">河南option>
select>
数据的值就是上面自己写出的省份，所以此时就能够进行提交：
当然，可以给他们一个value属性值，当写上value的时候，提交就会强制显示value里面的内容，如下：
<select name="shengfen">
<option value="B">北京option>
<option value="S">上海option>
<option value="T">天津option>
<option value="SD">山东option>
<option value="SX">山西option>
<option value="H">河南option>
select>
