有一个关于label标签问题请求不二老师@不二如是
label标签中的for属性里的值，是对应标签中的name还是id呢？我试了好像只能是id，name好像不行。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<style>
form {
text-align: center;
}
button {
outline: none;
background: none;
width: 300px;
height: 100px;
border-radius: 10px;
border: 2px solid cornflowerblue;
font-size: 48px;
cursor: pointer;
transition: all 0.4s;
color: cornflowerblue;
}
button:hover {
background: cornflowerblue;
color: white;
}
</style>
</head>
<body>
<form action="server.php" method="post">
<p>
<label>
姓名：
<input type="text" name="username" placeholder="请输入您的姓名" autofocus="autofocus" required="required">
</label>
</p>
<p>
<label>
电话：
<input type="tel" name="tel" placeholder="请您输入电话" required="required">
</label>
</p>
<p>
<label>
邮箱：
<input type="email" name="email" placeholder="请您输入邮箱" required="required">
</label>
</p>
<p>
<label>
时间：
<input type="date" name="date" placeholder="请您输入上课时间" required="required">
</label>
</p>
<p>
性别：
<input type="radio" name="sex" required="required" value="woman" checked="checked">女
<input type="radio" name="sex" required="required" value="man">男
</p>
<p>
<label for="class">
课程：
<select name="class" id="class">
<option value="1">C#</option>
<option value="2">Python</option>
<option value="3">C++</option>
<option value="4">HTML5</option>
</select>
</label>
</p>
<p>
<label>
<input type="checkbox" name="rule" required="required">
遵守相关规定
</label>
</p>
<p>
<button>提 交</button>
</p>
</form>
</body>
</html>
本帖最后由 华丽转身123 于 2018-4-30 14:07 编辑
我也来交作业
******************************************************************
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>0018表单</title>
<style type="text/css">
body{
width: 100%;
}
form{
width: 100%;
height: 100%;
text-align: center;
}
button{
width: 500px;
height: 66px;
}
</style>
</head>
<body>
<form method="post" action="fishc_server.php">
<p>
<lable>姓名:<input type="text" name="Username" placeholder="你的名字" autofocus="autofocus"/></lable>
</p>
<p>
<lable>电话:<input type="text" name="tel" placeholder="你的手机号码"/></lable>
</p>
<p>
<lable>邮箱:<input type="text" name="mail" placeholder="你常用的邮箱"/></lable>
</p>
<p>
<lable>时间:<input type="text" name="time" placeholder="当前时间"/></lable>
</p>
<p>
<lable for="sex">性别</lable>
<input type="radio" name="sex" value="female" checked/>女
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="other"/>其它
</p>
<lable><input type="checkbox" name="rule" required="required"/>遵守鱼C的规定</lable>
<p><lable for="class">选择课程</lable>
<select name="class">
<option value="1">Scratch</option>
<option value="2">Python</option>
<option value="3">C++</option>
<option value="4">H5</option>
<option value="5">Qt</option>
</select>
</p>
<p ><button>劳斯要提交表单了</button></p>
</form>
</body>
</html>
****************************************************************
本帖最后由 隨鈊乄鎍慾 于 2018-5-25 11:45 编辑
看不二讲段子也不错！{:10_282:}
<!DOCTYPG html>
<html>
<head>
<meta charset="utf-8"><!--/*五壮士之一：meta*/-->
<title>18表单</title><!--/*五壮士之一：标题*/-->
<!--/*五壮士之一：定义文档与外部资源的关系;同时style壮士*/-->
<!--<link rel="stylesheet" type="text/css" href="0008.css" >-->
</head>
<body>
<div id="sheet" >
<form method="pos" action="fishc_server.php" >
<p> <label> 姓名：<input type="text" name="username" placeholder="请输入姓名" autofocus="autofocus"> </label> </p>
<p> <label> 电话：<input type="tel" name="username" placeholder="有福利我们会极时通知你！" autofocus="autofocus"> </label> </p>
<p> <label> 项目：<input type="text" name="username" placeholder="预约项目名称" autofocus="autofocus"> </label> </p>
<p> <label> 时间：<input type="data" name="username" placeholder="到店时间" autofocus="autofocus"> </label> </p>
<p>
<label for="sex" > 性别：</label>
<input type="radio" name="sex" value="female" checked>女
<input type="radio" name="sex" value="male" >男
</p>
<p>
<label for="class" >请选择服务项目</label>
<select name="class">
<option value="1">美甲</option>
<option value="1">纹绣</option>
<option value="1">美体</option>
<option value="1">丰胸</option>
<option value="1">祛逗</option>
</select>
</p>
<p>
<label><input type="checkbox" name="rule" required="required" checked>遵守鱼C相关规定</label>
</p>
<p align="center"><button>劳资要交表啦</button> </p>
<style>
button{
width:230px;
height:33px;
transform:translateX(6%);
}
</style>
</form>
</div>
<style>
body{
background: url(background.jpg) center center;
<!--"background-size: cover;"-->
margin:0;/*初始化内外边距*/
padding:0;
position:relative; /*相对定位*/
}
#sheet{
position:absolute;/*绝对定位*/
top:50%;
width:100%;
text-align:center;/*设置文字水平居中*/
transform:translateY(-50%);
}
</style>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meata charset="UTF-8">
<title>歡迎來到HTML世界</title>
<style>
body{
background:url(KED08.jpg);
background-size: cover;
margin: 0;
padding: 0;
position: relative;
}
p{
text-align:center;
}
button{
width:500px;
height:66px;
}
</style>
</head>
<body>
<form method="post" action="fishc_server.php">
<p><label>姓名：<input type="text" name="username" placeholder="這位大大，您貴姓？" autofocus="autofocus"></label></p>
<p>
<label for="sex">性別：</label>
<input type="radio" name="sex" value="female" checked>女
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="other">其他
</p>
<p><label>電話：<input type="text" name="tel" placeholder="輸入您的電話。" required="required"></label></p>
<p><label>郵箱：<input type="text" name="mail" placeholder="輸入，有福利～"></label></p>
<p><label>時間：<input type="text" name="date" placeholder="妳何時有空？"></label></p>
<p>
<label for="class">請選擇課程</label>
<select name="class">
<option value="1">Scratch</option>
<option value="2">Python</option>
<option value="3">C++</option>
<option value="4">HTML5</option>
<option value="5">Qt</option>
</select>
</p>
<p>
<label><input type="checkbox" name="rule" required="required">遵守相關規定</label>
</p>
<p><button>填完就可以起飛了哦～</button>
</form>
</body>
</html>
交作业了哦 交作业啦！<!doctype html>
<html>
<meta charset="uft-8">
<head>
<title>lesson 0018</title>
</head>
<body>
<!--这里不是很懂，留存先， 所以我们选用post然后将数据，提交到fishc_server.php页面，请默认这个页面存在哈，代码如下： -->
<form align="center" method="post" action="fishc_server.php">
<p><label>姓名：<input type="text" name="username" placeholder="输姓名！" autofocus="autofocus"></label></p >
<!-- required:'必须的' -->
<p><label>电话：<input type="tel" name="tel" placeholder="请输入电话号码" required="required"></label></p>
<p><label>邮箱：<input type="email" name="email" placeholder="输入email有福利"></label></p>
<p><label>时间：<input type="date" name="date" placeholder="你想何时上课？"></label></p>
<p>
<label for="sex">性别:</label>
<input type="radio" name="sex" value="female" checked>女
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="other">其他
</p>
<p>
<label for="classes">请选择课程:</label>
<select name="classes">
<option value="1">Scratch</option>
<option value="2">Python</option>
<option value="3">C++</option>
<option value="4">HTMLS</option>
<option value="5">Qt</option>
</select>
</p>
<p>
<label><input type="checkbox" name="rules" required="required" checked>表示愿意遵守鱼C相关规定</label>
</p>
</form>
<p align="center"><button id="confirm">劳资要<big>交表啦</big></button></p>
<style>
button
{
width:300px;
height:66px;
}
</style>
</body>
</html>
{:10_298:}
<!DOCTYPE html>
<html lang='en'>
<head>
<title>test</title>
<meta charset='utf-8'>
<style>
button{
width: 500px;
height: 66px;
}
body{
text-align: center;
position: relative;
}
</style>
</head>
<body>
<form>
<p><label>姓名：<input type='txt'
name='username' placeholder='吾日三省吾身'
autofocus='autofocus'></label></p>
<p><label for='sex'>性别：</label>
<input type='radio' name='sex' checked>女
<input type='radio' name='sex'>男
<input type='radio' name='sex'>其他</p>
<p><label>电话：<input type='tel'
name='username' placeholder='屠龙的勇士成为恶龙'
required='required'></label></p>
<p><label>邮箱：<input type='email'
name='username' placeholder='贪嗔痴'></label></p>
<p><label>时间：<input type='data'
name='username' placeholder='一寸光阴一寸金'></label></p>
<p>
<label for='class'>请选择要体验的内容</label>
<select name='class'>
<option value='1'>性爱</option>
<option value='2'>背叛</option>
<option value='3'>疾病</option>
<option value='4'>知音</option>
<option value='5'>孤独</option>
</select>
</p>
<p><label><input type='checkbox' name='rule'
required='required'></label>同意遵守人生各项协议</p>
<p><button>开始体验</button></p>
</form>
</body>
</html> {:10_279:}{:10_279:}{:10_279:} <!doctype>
<html>
<head></head>
<body>
<form action="fishc_server.php" method="post">
<p align="center"><label>姓名：<input type="text" name="username" placeholder="大佬请输入姓名" autofocus="autofocus"></label></p>
<p align="center"><label>电话：<input type="tel" name="tel" placeholder="输入您的电话，我们的MM不会骚扰你" required="required"></label></p>
<p align="center"><label>邮箱：<input type="email" name="email" placeholder="输入，有福利"></label></p>
<p align="center"><label>时间：<input type="date" name="time" placeholder="你想何时上课"></label></p>
<p align="center">
<label for="sex">性别：</label>
<input type="radio" name="sex" value="female" checked>女
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="other">其他
</p>
<p align="center">
<label><input type="checkbox" name="rule" required="required">准守鱼C规定</label></p>
</p>
<p align="center">
<label for="class">小天才养殖场</label>
<select name="class">
<option value="1">Scratch</option>
<option value="2">Python</option>
<option value="3">HTML</option>
<option value="4">C++</option>
<option value"5">Qt</option>
</select>
</p>
<p align="center"><button>劳资要交表啦</button></p>
<style>
button {
width: 500px;
height: 66px;
}
</style>
</form>
</body>
</html> 继续交作业
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>018练习</title>
<style type="text/css">
html,body{
height: 100%;
font-family: sans-serif;
}
#xinxi{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%)
}
body{
margin: 0;
padding: 0;
position: relative;
}
button{
width: 500px;
height: 66px;
font-size: 44px;
}
</style>
</head>
<body>
<div id="xinxi">
<form method="post" action="fishc.php">
<p><label>姓名：<input type="text" name="username" placeholder="请输入您的姓名" autofocus="autofocus" required="required"></label></p>
<p>
<label for="sex">性别：</label>
<input type="radio" name="sex" value="female" checked>女
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="others">其他
</p>
<p><label>电话：<input type="tel" name="tel" placeholder="请输入11位手机号" required="required"></label></p>
<p><label>邮箱：<input type="email" name="email" placeholder="请输入常用邮箱"></label></p>
<p><label>日期：<input type="datetime" name="date" placeholder="请输入你期望的上课日期"></label></p>
<p>
<label for="class">请选择课程</label>
<select name="class">
<option value="1">Scratch</option>
<option value="1">Python</option>
<option value="1">C++</option>
<option value="1">HTML5</option>
<option value="1">Qt</option>
</select>
</p>
<p>
<label><input type="checkbox" name="rule" required="required">遵守注册守则</label>
</p>
<p align="center"><button>注 册</button></p>
</form>
</div>
</body>
</html>
交作业：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表单</title>
<style>
html{
margin: 0;
padding: 0;
width: 100%;
}
body{
background: url(../../images/bg.jpg) center center;
}
form{
width: 100%;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
background-color: rgba(30, 11, 55, .2)
}
</style>
</head>
<body>
<form action="">
<p>
<label for="username">姓名：
<input type="text" name="username" id="user" placeholder="请输入姓名" autofocus='autofocus'>
</label>
</p>
<p>
<label for="sex">性别：</label>
<input type="radio" name="sex" value="male"><span>男</span>
<input type="radio" name="sex" value="female" checked='checked'><span>女</span>
</p>
<p><label for="email">邮箱：<input type="email" name="email" required='required'></label></p>
<p><label for="phone">手机：<input type="tel" name="phone" required='required'></label></p>
<p><label for="email">时间：<input type="datetime-local" name="time" required='required'></label></p>
<p>
<label>请选择课程：
<select name="course" id="course">
<option value="python">Pyhon</option>
<option value="java">Java</option>
<option value="js">Javascript</option>
</select>
</label>
</p>
<p><label for="rule"><input type="checkbox">同意本站使用协议</label></p>
<p>
<input type="submit" value="提交">
<input type="reset" value="取消">
</p>
</form>
</body>
</html> <!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>表单练习</title>
</head>
<body>
<div id="form">
<form method="post" action="fishc_server.php" align="center">
<!--method属性，中用两种提交方式：post & get,post，把数据放在数据体内然后再发给后台，数据不能直接被看到，但是传输数据量大
get，把数据放在URL中，以明文（可看）的方式发送给后台，传输数据量小，不能传输文件类数据。
说白了，就是get传输数据，会在目标页面显示用户数据很不安全！
method，用来指定表单提交数据的方式。
action，用来指定表单提交的目的页面。-->
<p><label>姓名：<input type="text" name="username" placeholder="请输入姓名" autofocus="autofocus"></label></p>
<!--placeholder占位符，起到提示作用-
autofocus默认自动获得焦点-->
<p><label>电话：<input type="tel" name="tel" placeholder="请输入电话号码" required="required"></label></p>
<!--表明用户必须输入一个值，否则无法通过输入验证,必填项-->
<p><label>邮箱：<input type="email" name="email" placeholder="输入，有福利～"></label></p>
<p><label>时间：<input type="date" name="date" placeholder="你想何时上课？"></label></p>
<p>
<label for="sex">性别：</label>
<!--因为label和input独立分开，用for进行关联-->
<input type="radio" name="sex" value="female" checked="">女
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="other">其他
</p>
<p>
<label for="class">请选择课程</label>
<select name="class">
<option value="1">Scratch</option>
<option value="2">Python</option>
<option value="3">HTML5</option>
<option value="4">C++</option>
<option value="5">Qt</option>
</select>
</p>
<p>
<label><input type="checkbox" name="rule" required="required">遵守相关规定</label>
</p>
<p><button>提交</button></p>
<style>
button{
width: 250px;
height: 33px;
border-radius: 10px;
color: #FFF;
background: #2385FE;
border-color: #2385FE;
}
</style>
</form>
</div>
</body> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="fishc_server.php" method="POST" style="text-align: center"autocomplete="off">
<p><label for="">姓名：<input type="text" name="username" placeholder="贵姓"autofocus></label></p>
<p><label for="">电话：<input type="text" name="tel" placeholder="188" required></label></p>
<p><label for="">邮箱：<input type="text" name="email" placeholder="邮箱" ></label></p>
<p><label for="">生日：<input type="text" name="birth" placeholder="生日" ></label></p>
<p>
<label for="sex">性别：</label>
<input type="radio" name="sex" value="female" checked>女
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="other">其他
</p>
<p>
<label><input type="checkbox" name="rule" required="required">遵守鱼C相关规定</label>
</p>
<p>
<label for="sel">请选择课程</label>
<select name="sel">
<option value="1">Scratch</option>
<option value="2">Python</option>
<option value="3">C++</option>
<option value="4">HTML5</option>
<option value="5">Qt</option>
</select>
</p>
<p><button>劳资要交表啦</button></p>
</form>
</body>
</html>
交作业！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sex</title>
</head>
<body>
<p align="center">
<label for="sex">性别：</label>
<input type="radio" name="sex" value="famale" checked="checked">女
<input type="radio" name="sex" value="man" >男
<input type="radio" name="sex" value="other">其他
</p>
<p align="center">
<label>
<input type="checkbox" name="rule" required="required">遵守规定
</label>
</p>
<p align="center">
<label>请选择课程</label>
<select name="class">
<option value="1">Python</option>
<option value="2">C++</option>
<option value="3">Linux</option>
<option value="4">C</option>
</select>
</p>
<p align="center"><button>
老子要交表啦
</button></p>
<style type="text/css">
button{
width: 500px;
height: 66px;
}
</style>
</body>
</html> <form method="post" action="fishc_server.php" align="center">
我看好几个是这样写的,在form标签的属性里找来找去没找到align这个项,居然也成功运行?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>让编程改变世界</title>
<style>
button{
width:500px;
height:66px;
}
#box {
width: 600px;
height: 400px;
margin: 100px auto;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<form method="post" action="fishc_server.php">
<p><label>姓名：<input type="text" name="username" placeholder="这位鱼油大帝，您贵姓？" autofocus="autofocus"></label></p>
<p>
<label for="sex">性别:</label>
<input type="radio" name="sex" value="female" checked>女
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="other">其他
</p>
<p><label>电话：<input type="text" name="tel" placeholder="输入您的电话，我们的MM不会骚扰你" required="required"></label></p>
<p><label>邮箱：<input type="text" name="email" placeholder="输入，有福利～"></label></p>
<p><label>时间：<input type="text" name="date" placeholder="你想何时上课？"></label></p>
</form>
<p>
<label for="class">请选择课程</label>
<select name="class">
<option value="1">Scratch</option>
<option value="2">Python</option>
<option value="3">C++</option>
<option value="4">HTML5</option>
<option value="5">Qt</option>
</select>
</p>
<p>
<label><input type="checkbox" name="rule" required="required">遵守鱼C相关规定</label>
</p>
</form>
<p align="center"><button>劳资要交表啦</button></p>
</div>
</body>
</html>
交作业交作业~ <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>提交表单</title>
</head>
<body>
<form action="fishc_server.php" method="post">
<label>姓名：<input type="text" placeholder="贵姓？"name="name" autofocus required></label><br>
<label>性别：
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="other">其他
</label><br>
<label>联系电话：<input type="tel" placeholder="联系方式" name="tel" required></label><br>
<label>联系邮箱：<input type="email" placeholder="邮箱" name="email"></label><br>
<label>预约时间：<input type="date" name="date"></label><br>
<label>预约课程：
<select name="class">
<option value="1">Scratch</option>
<option value="2">Python</option>
<option value="3">C++</option>
<option value="4">HTML5</option>
<option value="5">Qt</option>
</select>
</label><br>
<label><input type="button" name="submit" value="交卷！"></label>
</form>
</body>
</html>
页:
1
[2]