HTML表单的简单用法
2017-02-18 本文已影响0人
饥人谷_風逝
引言
表单，顾名思义用于填充之后将数据提交给服务器。要完成这一过程，除了用户填写以外，我们还需要完成几个部分，第一是展现表单待填项目，第二是提交。
正文
首先我们先创建一个表单
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="information">
<form action="/getInfo" method="get">
</form>
<div class="submit">
<button>提交</button>
</div>
<div>
<html>
1.如何完成提交
div.information区块是表单所使用的区块，而form则需要被包含在该区块内。form首标签中，action即表单提交后进行的操作，method对应着两种不同的提交方式(get和post)，这样当我们按下提交后，由form封装的内容，便会以method定义的方式，进行action对应的提交操作。
2.可进行的待填项目
<form action="/getInfo" method="get">
<div class="username">
<input id="username" type="text" name="username" value="123">
</div>
</form>
如上，要新增的项目在form里面进行添加，并由div.newitem进行封装。n更改type后面对应的类型，就可以新建不同类型的表单项目。name=变量名，value=是初始值。根据具体类型，格式有所区别。
我们可以添加的项目包括
2.1input标签
- 单行文本输入框
<div class="username">
<input id="username" type="text" name="username" value="123">
</div>
- 单项选择
<div class="sex">
<label>性别</label>
<input type="radio" name="sex" value=male>男
<input type="radio" name="sex" value=female>女
</div>
其中，同一组的多个选项的name值应该相同。
- 多项勾选
<div class="hobby">
<label>爱好</label>
<input type="checkbox" name="hobby" value=reading>阅读
<input type="checkbox" name="hobby" value=running>跑步
</div>
- 文件上传框
<div class="file">
<label>上传相关文件</label>
<input type="file" name="myfile" accept="image/png">
</div>
accept规定上传文件的类型。
- 按钮
<div class="button">
<input type="submit" value="Submit" /> 提交
<input type="reset" value="Reset" /> 重置
</div>
2.2其他标签
- 文本输入区域
<textarea name="article">
</textarea>
- 下拉菜单
<div class="select">
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" >上海</option>
<option value="hangzhou">杭州</option>
</select>
</div>
