HTML表单
Posted acrifhy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML表单相关的知识，希望对你有一定的参考价值。
html表单
表单元素：
- 使用< form >标签定义表单，表单有两个最重要的属性action和method，action属性定义了表单提交的地址，method属性定义了表单提交的方式
- 表单有两种提交方式，一种是get，一种是post。
- 其它表单控件元素必须放在form标签内部
例如：
<body>
<form action="" method="GET">
<div>你最喜欢的动漫人物是什么？</div>
<div>
<input type="text" value="" />
</div>
<div>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</div>
</form>
</body>
会有如下效果：（action里面要填地址的）
input
表格元素
- input是一个单标签，其属性type代表了input的表单类型，input标签就是通过type属性的不同取值来定义不同的表单控件。
单文本框：可以输入一行文本的表单控件
<input type="text" />
单选按钮：具有相同name属性的单选按钮只能选择一个
<input type ="radio" />
多选按钮：可以选中多个选择框
<input type="checkbox" />
按钮：普通按钮
<input type="button" />
提交按钮：会触发将表单数据提交到服务器的功能
<input type="submit" />
重置按钮：会清除表单中所有的数据，恢复表单中的原始值
<input type="reset" />
文件上传按钮：用于文件上传
<input type="file" />
密码：会掩盖你的输入
<input type="password" name="pwd"></div>
input属性name，代表类别，比如一堆单选的name必须要一样；属性value代表这个选项提交上去的值；在input标签后面紧跟着可以写label标签，标签中写文本，在label标签里写文本选择时就不止可以点按钮，点文本同样有效，当然需要在label里设置属性for，在input里设置属性id，二者相同即可。
这边直接用例子展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<base target="_blank"/>
</head>
<body>
<form action="https://www.baidu.com" method="GET">
<div>请选择你的女武神</div>
<div>请输入您的操控者编号：<input type="text" name="user"></div>
<div>请输入您的操控者密码：<input type="password" name="pwd"></div>
<div>女武神：
<input type="radio" name="valkyrie" id="s" value="幽兰黛尔"><label for="s">幽兰戴尔</label>
<input type="radio" name="valkyrie" id="a" value="雷电芽衣"><label for="a">雷电芽衣</label>
<input type="radio" name="valkyrie" id="b" value="琪亚娜"><label for="b">琪亚娜</label>
<input type="radio" name="valkyrie" id="c" value="布洛妮娅"><label for="c">布洛妮娅</label>
</div>
<div>武器选择
<input type="radio" name="tool" id="1" value="阳离子手炮"><label for="1">阳离子手炮</label>
<input type="radio" name="tool" id="2" value="地藏御魂"><label for="2">地藏御魂</label>
<input type="radio" name="tool" id="3" value="歼星者19C"><label for="3">歼星者19C</label>
<input type="radio" name="tool" id="4" value="劫灭"><label for="4">劫灭</label>
<input type="radio" name="tool" id="5" value="11th原典"><label for="5">11th原典</label>
<input type="radio" name="tool" id="6" value="胧光之努达尔"><label for="6">胧光之努达尔</label>
<input type="radio" name="tool" id="7" value="天霜之斯卡蒂"><label for="7">天霜之斯卡蒂</label>
<input type="radio" name="tool" id="8" value="贯星枪"><label for="8">贯星枪</label>
</div>
<div>圣痕选择
<input type="checkbox" name="sss" id="01" value="上"><label for="01">上</label>
<input type="checkbox" name="sss" id="02" value="中"><label for="02">中</label>
<input type="checkbox" name="sss" id="03" value="下"><label for="03">下</label>
</div>
<div><input type="submit" value="确认"></div>
</form>
</body>
</html>
get方式会把所有数据提交到url上面
select
< select >用来定义列表，< option >用来定义列表项
例如：
<select name="course" id="01">
<option value="Math">数学</option>
<option value="Chinese">语文</option>
<option value="English">英语</option>
</select>
改变默认选项：
<select name="course" id="01">
<option value="Math">数学</option>
<option value="Chinese" selected>语文</option>
<option value="English">英语</option>
</select>
改变可同时展示的选项个数（默认一个）：
<select name="course" id="01" size="2">
<option value="Math">数学</option>
<option value="Chinese" selected>语文</option>
<option value="English">英语</option>
</select>
让下拉列表变成多选（按shift多选）：
<select name="course" id="01" size="2" multiple>
<option value="Math">数学</option>
<option value="Chinese" selected>语文</option>
<option value="English">英语</option>
</select>
texttarea
< texttarea >用来表示多行文本域
例如：
<textarea name="" id="" cols="30" rows="10"></textarea>
rows代表行，cols代表列
会生成一个文本框，可拖动大小
以上是关于HTML表单的主要内容，如果未能解决你的问题，请参考以下文章
Ionic2 Ion-Input onSubmit 单击表单内的顶部按钮