Web前端笔记4：表单（input元素）

一、表单的基本概念

        在Web中，表单是一个非常重要的元素，用于从用户那里获取信息，比如登录信息，搜索关键字，个人资料等等。表单元素指的是不同类型的input元素。表单包括文本框、密码框、单选框、复选框、下拉列表等。

二、表单标签

       <form>标签用于创建供用户输入的HTML表单。<form>标签是成对出现的。

        表单的基本语法及格式为：

 <!-- action属性是表单的处理方式，通常是E-mail地址或网址
         method属性是表单的传送方向 -->
<form name="表单名" action="URL" method="get|post">
   ...
</form>

 三、表单元素--input元素

        HTML中的<input>元素用于创建交互式的表单，以便用户向服务器提交信息。<input>元素可以设置不同的类型（通过type属性），比如文本（text）、密码（password）、单选按钮（radio）、复选框（checkbox）、提交按钮（submit）、重置按钮（reset）、文件选择（file）、隐藏（hidden）等等。

注：<input>元素不自动换行，要手动换行。

1、文字和密码的输入

        使用<input>元素的type属性，可以在表单中加入表项。

<!-- type属性为text，输入的文本以标准字符显示 -->
<input type="text" name="文本框名">
<!-- type属性为password，输入的每个字符显示为符号"*""，显示保护隐私 -->
<input type="password" name="密码框名">

效果如下:

2、重置和提交 

        表单按钮有4种类型：提交按钮、重置按钮、普通按钮和图片按钮。

        <!-- 用于提交表单到服务器 -->
        <input type="submit" value="提交"><br>
        <!-- 用于将表单的输入框的内容恢复到原始值 -->
        <input type="reset" value="重置"><br>
        <!-- 普通按钮 -->
        <input type="button" value="按钮名"><br>
        <!-- 图片按钮 -->
        <input type="image" value="图片来源"><br>

 

效果如下：

 3、复选框和单选框

        选择钮可以是单选框（radio）或多选框（checkbox）。用于一个或多个选项。

        <!-- 二选一 -->
        <input type="radio" name="单选框名" value="提交值">可乐
        <input type="radio" name="单选框名" value="提交值">雪碧<br>
        <!-- name属性是控制名，同一组的选择钮的控制名是一样的 -->
        <input type="checkbox" name="复选框名" value="提交值">001
        <input type="checkbox" name="复选框名" value="提交值">002

上传文件：<input type="file">

 

 

效果如下：