从零开始前端学习[20]:前端与后台可能需要使用交互的表单form，input标签
2017-09-24 00:30
831 查看
前端与后台可能需要使用交互的表单标签
form表单和input标签textarea文本域表单
select,option下拉列表表单
fieldset和legend组合表单
label标签
提示
博主：章飞_90628528
博客地址:http://blog.csdn.net/qq_29924041
form表单和input标签
什么是表单？？？表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入信息的元素一般表单区域使用form标签来进行包裹着；注意form是双标签
使用如下:
<form action="url">表单元素</form> action用于向后台发送数据
通常遇到的的输入表单输入类型有:
文本域 按钮元素 单选框 复选框 下拉列表 lable标签 定义域 隐藏的输入框
关于input表单
input是一个表单元素，并且是一个单标签，并且注意的是input标签是行块级标签，支持宽高，但是会横排显示，input元素中有如下属性，以下是
针对单行文本输入框
| 属性 | 值 |
|---|---|
| type | text(文本类型) password(密码类型的输入框) |
| name | 文本框的名称，这是必不可省的，因为在存储文本的时候需要用到 |
| value | 文本框的默认值 |
| placeholder | 提供可描述输入字段的预期值的提示信息，改提示会在输入字段为空时候显示，并且会在字段活的交单的时候消失 |
| disable | 禁用输入框 |
单选按钮即当用户从若干个给定的选择中去选取其中一个的时候，就会用到单选框，单选按钮框的type的类型为radio类型，
如下所示:
<input name="sex" type="radio"/>男 <input name="sex" type="radio"/>女
注意：对于单选框来说，因为是要从多个选择框中去选取一个，所以这组选择框应该是同一个类型展示的，所以这个时候必须是name是一致的。
给默认选中的那个值设置checked属性，这个时候就默认选中了
复选按钮
复选按钮是在一组同一类型中选择一个或者多个，也就是当用户需要从若干个给定的选择中选取一个活若干个选项的时候，这个时候就是需要使用到复选框了
复选框的type属性值为checkbox
<input type="checkbox" name="apple"/>苹果 <input type="checkbox" name="banana"/>香蕉
按钮标签
按钮标签，即显示的能点击的相关标签，主要分为普通点击按钮标签，提交标签，以及重置标签
<input type="button" value="按钮"/>普通按钮 <input type="submit" value="提交按钮"/>提交按钮标签 <input type="reset" value="重置按钮"/> ，一键清空，
注意在submit中，需要form添加action属性以及地址
隐藏输入框
定义隐藏的输入字段,type的属性值为:hidden
<input type="hidden" name="hidden_area"/>
文本域标签
文本域标签也就是主要用于对文件的选择选取使用的，
type=”file”
使用如下所示: <input type="file" name="upload_file"/>
所以可以从上面可以得到，input标签的样式是受到type类型来控制的，根据type类型的不同，其显示的效果也就不同，同时还要注意的是
以表格形式来展现下:
| type属性值 | type属性的含义 |
|---|---|
| text | 正常的文本输入框 |
| password | 文本输入框，但是输入的是密码 |
| radio | 单选框，name的值需要是一样的 |
| checkbox | 复选框，name可以不一样 |
| button | 普通的按钮形式 |
| submit | 提交的按钮形式 |
| reset | 重置的按钮形式,一键清空 |
| hidden | 定义隐藏的输入字段 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Title</title>
<style>
body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ul, ol {
margin: 0;
list-style: none;
padding: 0;
}
a {
text-decoration: none;
}
* {
margin: 0;
padding: 0;
}
.main{width: 1200px;margin: 50px auto;box-shadow: 0 0 10px 0 deeppink}
.main .username{width: 400px;height: 30px}
.main .password{width: 400px;height: 30px}
.main form div{margin-top: 15px}
</style>
</head>
<body>
<div class="main">
<form action="www.baidu.com">
<div class="text_password">
用户名:<input class="username" type="text" name="username" placeholder="用户名"/>
<br>
密码:<input class="password" type="password" placeholder="密码" />
</div>
<div class="radio_check">
<div class="radio">
<input type="radio" name="sex" id="male"><label for="male">男</label>
<input type="radio" name="sex" id="female"><label for="female">女</label>>
</div>
<div class="check">
<input type="checkbox" name="apple" id="apple"><label for="apple">苹果</label>
<input type="checkbox" name="banana" id="banana"><label for="apple">香蕉</label>
<input type="checkbox" name="oranage" id="oranage"><label for="apple">橘子</label>
</div>
</div>
<div class="button_submit_reset">
<input type="button" name="button" value="normal button">
<input type="submit" name="submit" value="submit button">
<input type="reset" name="reset" value="reset button">
</div>
<div class="hidden">
<input type="hidden" value="隐藏了"/>
</div>
<div class="file">
<input type="file" name="file_upload" value="上传"/>
</div>
</form>
</div>
</body>
</html>显示的效果如下所示:
具体调试效果可以根据上面的案例来进行调试，
textarea文本域表单(多文本输入框)
<textarea name="file" rows=10 cols=20></textarea>
1、 cols，垂直列 在没有做样式表设置的情况下，它表示一行中可容纳下的字节数。例如cols=60，表示一行中最多可容纳60个字节，也就是30个汉字（不同的浏览器存在兼容性，因此，不准确）
2、 rows，水平行。表示可显示的行数，例如rows=10，表示可显示10行。超过10行，则需要拖动滚动条来浏览了
注意:name，文本框的名称，这项必不可省，因为存储文本的时候必须用到
但是需要注意的是，一般情况下，我们并不用cols或者rows来进行行列的设置，而是使用width或者height来进行设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Title</title>
<style>
body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ul, ol {
margin: 0;
list-style: none;
padding: 0;
}
a {
text-decoration: none;
}
* {
margin: 0;
padding: 0;
}
.main{width: 1200px;margin: 50px auto;box-shadow: 0 0 10px 0 rebeccapurple}
.main form #textarea_1{background: greenyellow}
.main form #textarea_2{width: 500px;height: 300px;background: blue}
</style>
</head>
<body>
<div class="main">
<form action="www.baidu.com">
<textarea name="textarea_1" id="textarea_1" cols="30" rows="10" placeholder="文本输入框1"></textarea>
<textarea name="textarea_2" id="textarea_2" placeholder="文本输入框2"></textarea>
</form>
</div>
</body>
</html>显示效果如下所示:
select下拉列表表单
select 元素可创建单选或多选菜单<select name="data" > <option value="1">一月</option> <option value="2">二月</option> <option value="3">三月</option> <option value="4">四月</option> <option value="5">五月</option> <option value="6">六月</option> <option value="7">七月</option> <option value="8">八月</option> <option value="9">九月</option> <option value="10">十月</option> <option value="11">十一月</option> <option value="12">十二月</option> </select>
select标签是一个组合标签，是需要用select和选项标签option联合使用才能使用的，也就类似于ul和li这样的标签，
关于属性:
disable:规定禁止使用下拉列表 multiple:规定可以选择多个选项 size 对丁下拉列表可见的选项数目，可以显示下拉列表的数量，但是按ctrl不能多选
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{
width: 400px;
margin: 100px auto;
}
textarea{
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<!-- 一些属性
size: 控制下拉列表可见的数目
multiple: 按住Ctrl可以选中多个
-->
<div class="main">
<form action="">
<!-- select下拉列表 -->
<select name="month" id="" size="7" multiple >
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四月</option>
<option value="5">五月</option>
<option value="6">六月</option>
<option value="7">七月</option>
<option value="8">八月</option>
<option value="9">九月</option>
<option value="10">十月</option>
<option value="11">十一月</option>
<option value="12">十二月</option>
</select>
</form>
</div>
</body>
</html>显示如下:
fieldset和legend组合表单
组合表单中
<fieldset> <legend>定义域标题</legend>（只能写一个） 被组合的表单元素（如input） </fieldset>
在组合表单中，legend只能写一个，这种组合表单相对来说使用的可能比较少一点而已。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{
width: 400px;
margin: 100px auto;
}
textarea{
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="main">
<form action="">
<fieldset>
<legend>物流信息</legend>
姓名：<input type=""> <br>
年龄：<input type=""> <br>
性别：<input type=""> <br>
电话：<input type=""> <br>
</fieldset>
</form>
</div>
</body>
</html>显示如下:
label标签
1:label> 标签为 input 元素定义标记（和input选框搭配使用）。2:label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
3: 标签的 for 属性应当与相关元素的 id 属性相同。
<form> <input type="radio" name="sex" id="male" /> <label for="male">Male </label> <input type="radio" name="sex" id=“female" /> <label for=“female">Female </label> </form>
关于label已经在上面进行了使用，就是将文本标签信息与input进行联动。
欢迎持续访问博客
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端学习笔记2：使用表单标签，与用户交互
- [Spring MVC]学习笔记－－form表单标签的使用
- 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
- WEB前端开发学习----3.HTML表单form标签
- 从零开始前端学习[2]:img标签的使用
- accp6.0 《使用javascript增强交互效果》学习笔记ch6 表单基本验证技术
- HTML标签天天练7--表单4<form>[textarea]到此 表单学习结束
- Android学习-----如何使用sqlite进行后台数据交互，sqlite入门使用例程
- AJAX提交表单后要清空，否则再次提交原来的数据会认为重复提交，提交失败。使用ajaxSubmit 函数需要引入jquery.form.min.js 文件
- Struts2 form表单常用标签学习笔记
- form表单input标签
- html中，使用表单标签，与用户交互。
- form表单中input标签的11个高级用法
- 极客标签：可能是目前最好的前端代码学习工具
- 使用fieldset、label标签制作form表单
- HTML的表单form以及form内部标签的使用
- IOS入门学习（五）：基本交互功能之滑块、标签和操作表单和告警视图
- form表单中input标签的11个高级用法
- 百度编辑器UEEDITOR使用简单介绍 UEditor表单提交和后台交互详解 最后更新对应的版本：1.2.5.1 教程描述： 富文本编辑器的使用开发中，表单提交有多种场景，编辑器初始化有新增文章和编辑
- Extjs学习总结之11前端与后台的数据交互ajax