开始今天的内容之前首先来张图
这界面看起来很眼熟哦 qq的登陆界面,一般输入用户名和密码 然后点登陆 如果都正确的话就可以使用qq了.这节开始我们来研究一下从输入密码到登陆成功的过程(开始流程图模式 )
今天我们来讲第一部分 输入相关信息。所以 首先我们需要一个框框输入用户名
网页上用input标签来实现 代码如下
<input type="text">
然后我们在前面加上用户名三个字
代码如下
用户名:<input type="text">
然后是密码框，我们发现输入的密码显示成了点，很显然 上面那种input标签做不到，所以我们需要改一下input标签的type属性 代码如下(这里用了一个br标签换行)
用户名:<input type="text"><br>
密码:<input type="password">
再之后是两个可以点的框框 叫做复选框(可以同时选多个) 继续改type属性 代码如下
用户名:<input type="text"><br>
密码:<input type="password"><br>
<input type="checkbox">记住密码<input type="checkbox">自动登录
既然有了复选框，顺路就说一下单选框 依然是改type属性 代码如下
用户名:<input type="text"><br>
密码:<input type="password"><br>
<input type="checkbox">记住密码<input type="checkbox">自动登录<br>
<input type="radio">男<input type="radio">女效果如下
然后我们发现 这家伙可以既男又女，这很不科学，于是就有一个小小的要求，想要单选框互斥，需要它们的name属性的值相同 如下
用户名:<input type="text"><br>
密码:<input type="password"><br>
<input type="checkbox">记住密码<input type="checkbox">自动登录<br>
<input type="radio" name="sex">男<input type="radio" name="sex">女效果同上，只是不会既男又女了。
然后是一种与单选按钮类似的东西 叫做下拉列表，用select标签 (注意哦，这里用的不是input标签)代码如下
用户名:<input type="text"><br>
密码:<input type="password"><br>
<input type="checkbox">记住密码<input type="checkbox">自动登录<br>
<input type="radio" name="sex">男<input type="radio" name="sex">女<br>
<select>
<option value="标签实际的值1">标签显示的值1</option>
<option value="标签实际的值2">标签显示的值2</option>
<option value="标签实际的值3">标签显示的值3</option>
<option value="标签实际的值4">标签显示的值4</option>
</select>
有些时候可能在注册某些东西的时候需要上传一张图片什么的 ，这里继续使用input标签 如下
用户名:<input type="text"><br>
密码:<input type="password"><br>
<input type="checkbox">记住密码<input type="checkbox">自动登录<br>
<input type="radio" name="sex">男<input type="radio" name="sex">女<br>
<select>
<option value="标签实际的值1">标签显示的值1</option>
<option value="标签实际的值2">标签显示的值2</option>
<option value="标签实际的值3">标签显示的值3</option>
<option value="标签实际的值4">标签显示的值4</option>
</select><br>
<input type="file">
该写的信息都写完了，最后还要有一个提交按钮用来把数据发出去 如下
用户名:<input type="text"><br>
密码:<input type="password"><br>
<input type="checkbox">记住密码<input type="checkbox">自动登录<br>
<input type="radio" name="sex">男<input type="radio" name="sex">女<br>
<select>
<option value="标签实际的值1">标签显示的值1</option>
<option value="标签实际的值2">标签显示的值2</option>
<option value="标签实际的值3">标签显示的值3</option>
<option value="标签实际的值4">标签显示的值4</option>
</select><br>
<input type="file"><br>
<input type="submit">效果如下
有些时候一个页面上有可能有不止一个提交按钮，那么点击每个按钮具体用什么方式 发送哪些数据 到哪里呢 这个时候就要用到一个叫form的标签
<form name="input" action="发送的目标 暂时不用管" method="发送的方式 暂时也不用管">
用户名:<input type="text"><br>
密码:<input type="password"><br>
<input type="checkbox">记住密码<input type="checkbox">自动登录<br>
<input type="radio" name="sex">男<input type="radio" name="sex">女<br>
<select>
<option value="标签实际的值1">标签显示的值1</option>
<option value="标签实际的值2">标签显示的值2</option>
<option value="标签实际的值3">标签显示的值3</option>
<option value="标签实际的值4">标签显示的值4</option>
</select><br>
<input type="file"><br>
<input type="submit">
</form>这时 我们基本完成了我们的第一步了，但是有个小小的问题就是有点丑 于是我们想用某种方式让他们稍微整齐一点 ，这时我们可以使用table标签
table标签 用来画 一个表格，用内部包含的tr标签的个数来确定该表格有多少行，用tr标签中包含的td标签的个数来确定有几列 现在我们来画一个三行两列的表格
<table border='1'>
<tr><td>第一行第一列</td><td>第一行第二列</td></tr>
<tr><td>第二行第一列</td><td>第二行第二列</td></tr>
<tr><td>第三行第一列</td><td>第三行第二列</td></tr>
</table>
然后我们把前面写的那些放到表格中
<html>
<head></head>
<body>
<form name="input" action="发送的目标 暂时不用管" method="发送的方式 暂时也不用管">
<table border='1'>
<tr><td>用户名:</td><td><input type="text"></td></tr>
<tr><td>密码:</td><td><input type="password"></td></tr>
<tr><td></td><td><input type="checkbox">记住密码<input type="checkbox">自动登录</td></tr>
<tr><td>性别：</td><td><input type="radio" name="sex">男<input type="radio" name="sex">女</td></tr>
<tr><td>家乡</td><td><select>
<option value="1">亚洲</option>
<option value="2">欧洲</option>
<option value="3">非洲</option>
<option value="4">美洲</option>
</select></td></tr>
<tr><td>图片：</td><td><input type="file"></td></tr>
<tr><td></td><td><input type="submit"> <input type="reset"></td></tr>
</table>
</form>
</body>
</html>
到这里，最开始的流程图的第一步算是已经完成了
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
