HTML ＜form＞标签

 

<form>标签定义

<form>标签用于创建供用户输入的 HTML 表单。

而表单在网页中主要的的功能是数据收集。

表单一般分为三个部分：表单标签，表单域，表单按钮；

表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

表单域：包含文本框，密码域，多行文本框，复选框，单选框，下拉选择框和文件上传框等等，用来收集用户填写的数据，由<inout>来实现。

表单按钮：提交按钮，复位按钮，和一般按钮。

 表单标签

1. 使用<form>标签

<form method="post" action="https://www.baidu.com/"> 表单域 <input> </form>

method属性是规定如何发送表单数据，可以填写“post”和“get”，其中“get”是不安全的，会把数据暴露出去，所以一般不使用“get”，而是使用“post”；

action属性是跳转到指定网页，可以与提交按钮一起使用；

更多属性可以点击这里查看

<input>标签可以定义文本框，密码域，复选框，单选框和文件上传框等等；

表单域

表单域一般由<input>来实现

文本框只能读<input type="text" name="text" readonly="" value="无法修改"><br>
密码框自动获取光标且不能为空<input type="password" name="pass"  autofocus required>
文本框 禁用<input type="text" disabled="" value="禁用"><br>
提交按钮<input type="submit" value="提交">

autofocus 自动获取光标

required 让其不能为空，如果为空就会提示用户填写

readonly  让<input>只能读，不能修改

disabled 禁用<input>，无法对<input>进行点击

name=" " 元素名称

value=" " 元素的值

 

type属性规定input标签的类型

文本框<input type="text" name="username"><br>
密码框<input type="password" name="pass"><br>
单选按钮：
男<input type="radio" name="gender" value="男" checked="checkbox">
女<input type="radio" name="gender" value="女"><br>
<!-- checked="checkbox"可以默认选择 -->
多选按钮
玄幻<input type="checkbox" name="book" value="玄幻">
科幻<input type="checkbox"  name="book" value="科幻">
都市<input type="checkbox"  name="book" value="都市"><br>
文件选择<input type="file" value="文件">
邮箱<input type="email" name="email" placeholder="请输入邮箱">

type = "text"    文本框（单行）

type = "password“   密码框

type = "radio"    单选按钮

type = "checkbox"    多选按钮

type = "reset"     复位按钮

type = "file"     文件

type = "email"     邮箱

多行文本框<textarea name="area" cols="10" rows="10">这个人很懒什么都没有写</textarea><br>
下拉列表框 
请选择城市：<select multiple="multiple">
        	<option value="北京">北京</option>
        	<option selected="">南京</option>
        	<option>东京</option>
        	<option>重庆</option>
        	<option>湖北</option>
        </select><br>

多行文本框<textarea> cols控制列数，rows控制行数

下拉选择框 <select><option> selected默认选择 

表单按钮

提交按钮<input type="submit" value="提交"><br>
普通按钮<input type="button" value="普通按钮" ><br>
复位按钮<input type="reset" value="复位按钮" ><br>
图片按钮<input type="image" src="image"><br>

type="submit"     提交的按钮

type = "button"      普通的按钮

type = "image"    图像按钮

type = "reset"     复位按钮