HTML（三）表单的使用

最新推荐文章于 2023-11-15 10:41:33 发布

暮白寒窗雪

最新推荐文章于 2023-11-15 10:41:33 发布

阅读量400

点赞数 8

文章标签： html html5

本文链接：https://blog.csdn.net/tiben/article/details/116499789

版权

HTML（三）表单的使用

——————————————————————

一、表单的作用

用于收集用户信息。实现用户和网页之间的对话

二、表单的构成

(1)提示信息：是说明性的文字，提示用户如何进行操作

(2)表单控件：是具体的功能项

(3)表单域：包含了提示信息和表单控件

三、表单的创建

<form action="URL地址" method="提交方式" name="表单名称">
	      提示信息、表单控件
</form>
	   
 action：指定接收表单数据的服务器的地址
	   
 method：表单数据的提交方式。常用的方式是get或post
	   
 name：表单名称，用于多个表单的区分

四、表单的提示信息

<label> 提示信息 </label>

五、表单的控件

(1)input控件：

     A、单行文本框：
	 
	   <input type="text" placeholder="提示信息" maxlength="最大输入长度" value="值"/>
	   
	 B、密码框：
	 
	   <input type="password" placeholder="提示信息" maxlength="最大输入长度" value="值"/>
     
	 C、单选按钮：
	 
	   <input type="radio" value="值" name="名称" checked/>文字
	   
	 D、复选按钮：
	 
	   <input type="checkbox" name="名称" value="值"> 文字
	   
	 E、数字输入框：
	 
	   <input type="number" name="名称" value="值" max="最大值" min="最小值">
	   
	 F、日期、时间输入框：
	 
	   <input type="date" name="名称" >
	   
	 G、颜色选择框：
	 
	   <input type="color" name="名称">
	   
	 H、图像控件：
	 
	   <input type="image" name="名称">
	   
	 I、文件控件：
	 
	   <input type="file" name="名称">
	   
	 J、隐藏控件：在页面上不显示，但是可以向服务器传递值
	 
	   <input type="hidden" name="名称" value="值">
	   
	 K、按钮：
	 
	   (a)提交按钮：单击该按钮后，会将表单信息(表单域中所有控件的值)提交给服务器(action指定的服务器)
	   
	      <input type="submit" value="按钮上的文字">
		  
	   (b)重置按钮：单击该按钮后，会将表单信息(表单域中所有控件的值)回复到初始状态
	   
	      <input type="reset" value="按钮上的文字">
		  
	   (c)普通按钮：单击该按钮时没有任何操作
	   
	      <input type="button" value="按钮上的文字">

(2)select控件：

<select>
		     <option value="值">选项</option>
			 <option value="值">选项</option>
			 <option value="值">选项</option>
</select>

(3)textarea控件：

<textarea name="名称" cols="列数" rows="行数">
  </textarea>

例子

<!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>注册表单</title>
</head>
<body style="text-align: center;">

    <font color="red" size="35" face="宋体">用户注册表单</font>
    <hr width="800">
    <form