HTML表单的简单用法
2017-02-12 本文已影响0人
从这到那
** 本博客著作权归从这到那所有，转载请注明出处 **
表单的作用
HTML表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。
表单的工作机制
如何编写表单
首先表单我们需要使用form标签
<form action="" method="post">
表单元素
</form>
这里介绍一下form使用的两个属性action method
| 属性 | 值 | 描述 |
|---|---|---|
| action | URL | 规定当提交表单时向何处发送表单数据 |
| method | get、post | 规定用于发送表单数据的HTTP方法 |
更详细的属性介绍请点击我
输入元素
用的最多是输入标签input，有类型属性type来决定输入类型。常见的输入类型如下：
注意：
radiocheckbox还需要单独设置value属性
文本域
标签<input type="text">
<form>
My name: <input type="text" name="myname"><br>
</form>
显示效果：
密码字段
使用标签<input type="password">
<form>
密码：<input tupe="password" name="password">
</form>
显示效果：
单选按钮
标签<input type="radio">
<form>
<input type="radio" name="sex" value="male">Male<br />
<input type="radio" name="sex" value="female">Female<br />
</form>
显示效果：
复选框
标签<input type="checkbox">
<form>
<input type="checkbox" name="fruit" value="apple">Apple<br />
<input type="checkbox" name="fruit" value="banana">Banana<br />
<input type="checkbox" name="fruit" value="grape">Grape
</form>
显示效果：
未选中
选中
提交按钮
标签：<input type="submit">。当用户单击确认按钮事，表单的内容会被传送到另一个文件。表单的动作属性action定义了目的文件的文件名。
<form name="input" action="heml_form_action.php" method="get">
姓名<input type="text" name="name">
<input type="submit" value="提交">
</form>
显示效果：
除了input外还有一些其他的表单输入元素
注意：input标签不用闭合，以下标签是需要闭合的。
textarea
<form>
<textarea rows="10" cols="30">
我是多行文本输入框
</textarea>
</form>
显示效果：
select和option
<form>
<select name="city">
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="beijing">北京</option>
</select>
</form>
显示效果：
label
这个标签主要是为input元素定义标注（标记）。
<form>
<label for="male">Male</label>
<input type="radio" name="sex" value="male"><br />
<label for="male">Female</label>
<input type="radio" name="sex" value="female">
</form>
显示效果：
我们来写个完整的例子
先看效果：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="login">
<form action="/getInfo" method="get">
<div class="submit">
<button>提交😁</button>
</div>
<div class="username">
<label for="username">姓名</label>
<input id="username" type="text" name="username" value="test">
</div>
<div class="password">
<label for="password">密码</label>
<input id="password" type="password" name="password" placeholder="输入密码">
</div>
<div class="hobby">
<label>爱好</label>
<input type="checkbox" name="hobby" value="read"> 读书
<input type="checkbox" name="hobby" value="music"> 听歌
<input type="checkbox" name="hobby" value="study"> 学习
</div>
<div class="sex">
<label>性别</label>
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女"> 女
</div>
<div class="file">
<input type="file" name="myfile" accept="image/png">
</div>
<div class="select">
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="hangzhou">杭州</option>
</select>
</div>
<div class="textarea">
<textarea name="article">
多行文本
</textarea>
<br />
<input type="hidden" name="csrf" value="12345623fafdffdd">
<input type="button" value="Buttom" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</div>
</form>
</div>
</body>
</html>
