HTML-表单form-2018.07.05
2018-07-06 本文已影响0人
侯小强2018
HTML表单学习整理
重点：记住命令单词
难点：要有基本的自己的表单样式的逻辑
form标签基本框架格式：
<form action=" " method="get" 或者 method="post">
用户名：<input type="text" name=" " value=" "或者placeholder=" ">
<br/>
密 码：<input type="password" name=" " value=" "或者placeholder=" " >
<br/>
<input type="submit" name=" ">
</form>
基本框架显示如图：
新手实现最基本功能
小白解释：
- action 指的是如果用户提交后，基本信息提交的位置，可以选择网址，也可以选择本地的服务中的文件，都会在地址栏中打开显示。
- method 可以选择两个，get和post。 get代表可以显示输入的文本密码等信息，post代表不显示输入的文本密码等信息。一般处于用户的保护，都会选择post功能。
form新增功能：
-
单选按钮（Radio Buttons）
属性:type="radio" 后面跟着其他属性
<form>
性别：<input type="radio" name="sex" value="male" checked="checked" />男
<input type="radio" name="sex" value="female"/>女
</form>
如图显示：
单选按钮选项设置完成
-
复选按钮（Checkboxes）
<form>兴趣爱好
<input type="checkbox" name="chg" value=""> 唱歌
<input type="checkbox" name="yy" value=""> 游泳
<input type="checkbox" name="tw" value=""> 跳舞
</form>
如图显示：
复选框兴趣爱好显示
-
下拉选项列表<select>
-
默认选项<selected="selected">表示默认选中；option 定义下拉列表中的选项
<form>
<select name="city">
<option value="shanghai" selected="selected"> 上海</option>
<option value="shangh"> 北京</option>
<option value="shaai"> 常州</option>
</select>
</form>
如图显示：
默认选中上海
-
value"名称" 和placeholder“名称”的区别
value 输入后显示的是黑色字体，将文字输入后默认的名字不会删除，需要手动删除
placeholder 输入后显示的是灰色的字体，光标点击后，可以直接输入文本，基本上现在的网页上都使用这种标签登录用户名和密码。
用户名：<input type="text" name="user" value="aa" >
<br>
密码：<input type="password" name="psword" placeholder="在此输入密码" >
value和placeholser输入后的不同形式对比
-
提交 (submit)
将属性输入为submit时，系统会自动变成提交字样的，想改变文字，用value进行更名。
<form>不同结果显示：
<input type="submit" >
<input type="submit" value="登录"
</form>
如图显示：
默认为提交可更改为登录
-
隐藏域
如果设置了hidden后，网页的action中不会显示提交的信息，但是查看源代码可以看到。
<form>
<input type="hidden" name="222" value="333" >
</form>
综合练习实例，
一个是用form做，一个是form中套用了table，这样格式对齐的比较规整。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是实际操作的两个案例</title>
<style type="text/css">
</style>
</head>
<body>
<form action="http://www.baidu.com" method="post">
用户名：<input type="text" name="user" value="在此输入用户名">
<br> 密码：
<input type="password" name="psword" placeholder="在此输入密码">
<br/> 性别：
<input type="radio" name="sex" value="male" checked="checked" />男
<input type="radio" name="sex" value="female" />女
<br/> 兴趣爱好：
<input type="checkbox" name="chg" value="changge"> 唱歌
<input type="checkbox" name="yy" value="youyong"> 游泳
<input type="checkbox" name="tw" value="tiaowu"> 跳舞
<br/>
<select name="city">
<option value="shanghai" selected="selected"> 上海</option>
<option value="beijing"> 北京</option>
<option value="cahngzhou"> 常州</option>
</select>
<input type="submit" value="登录" align="right">
</form>
<hr/>
<hr/>
<!--
时间：2018-07-06
描述：第二个表格，尝试用table做
-->
<form action="http://www.baidu.com" method="post" style="float: left;align-content: center;">
<table>
<tr>
<td align="left"> <input type="text" name="uername" placeholder="用户名/手机号/邮箱"></td>
</tr>
<tr>
<td align="left"> <input type="password" placeholder="在此输入密码"></td>
</tr>
<tr>
<td align="left"> 性别: <input type="radio" name="sex" checked="checked">男<input type="radio" name="sex" checked="checked">女</td>
</tr>
<tr>
<td>兴趣爱好:<input type="checkbox">游泳<input type="checkbox">跳舞 <input type="checkbox">唱歌</td>
<td> </td>
<td> </td>
</tr>
<tr>
<select name="city">
<option value="shanghai" selected="selected"> 上海</option>
<option value="beijing"> 北京</option>
<option value="cahngzhou"> 常州</option>
</select>
</tr>
<input type="hidden" name="222" value="333">
<tr>
<td colspan="3" align="center">
<input type="submit" value="登录" "></td>
</tr>
</table>
</form>
</body>
</html>
如图显示：
两个表格显示
学习体验：
其实很多东西都是孰能生巧，慢慢的每天多会一点，就可以结合起来做出自己想要的效果！加油，侯小强！！！
未解决疑问：用table进行插入select时候，总是跳到第一行，百度没有找到解决办法！！！
问题找到啦，因为select 放在tr里面，但是少了一对td 所以会直接跳到上面一行！！！！
正确代码如下
<tr>
<td>
<select name="city">
<option value="shanghai" selected="selected"> 上海</option>
<option value="beijing"> 北京</option>
<option value="cahngzhou"> 常州</option>
</select>
</td>
</tr>
修改之后的表格
