HTML form表单用于为用户输入创建 HTML 表单。收集用户不同类型的数据。
HTML Form 語法
<form action="目的地址" method="传送方式"> 表单内容 </form>
HTML 表单是由 <form> 标签开始,用 </form> 标签结束,两个标签之间就是放置表单元素的地方,form 将用户填完的资料,发送至 action 所设定的目的地址,例如传到一个 PHP 页面,method 是内容传送的方式,有 get 与post 两种方式。
- get是用来从服务器上获得数据,在 URL 中对所有人都是可见的,不能传输大量的数据,受限于URL长度。
- 而post是用来向服务器上传递数据,数据不会显示在 URL 中。对内容长度没有限制。
HTML Form 表单内容范例
<form action="get.php" method="post"> <label for="name">用户名:</label><input type='text'><br> <label for="password">密码:</label><input type='password'><br> <input type='submit' value='提交'> </form>
范例在 <form>
与 </form>
标签之中使用了四个表单元素,分別为文字输入框<input type='text'>
,密码输入框<input type='password'>
,发送表单的按钮<input type='submit' value='提交'>
,这样的表单设计完成后,当用户填写完数据并提交,系统就会以 get 的方式将资料传送到 get.php 这个后台页面,这裡需要注意的是 method='post' 的 post 必须是小写,同样的 get 也要小写,至于 get.php 的数据处理功能则需要另外写。
常见表单元素
- 单行文字输入框 input type= text
<input type="text" name="" value="">
- 密码输入框 input type= password
<input type="password" name="" value="">
- 标注标签 label
<label for=" "> </label>
- 下拉选择框 select option
<select name=""><option value=""></option></select>
- 单选按钮 radio buttons
<input type="radio" name="" value="">
- 多选框 checkbox
<input type="checkbox" name="" value="">
- 多行文字输入框 textarea
<textarea name=""></textarea>
- 隐藏元素 input hidden
<input type="hidden" name="" value="">
- 按钮 button
<input type="button" name="">
- 提交表单按钮 submit
<input type="submit" name="" value="提交">
- 重置按钮 reset
<input type="reset" name="" value="重置">
常用元素属性:
type:输入的类型
name:表单的名称
value:表单的内容
这些表单的元素可以自由搭配成为一个完整的表单,每个元素都有他独特的属性以及语法规则。