HTML 常用表单元素使用以及注解

一、表单的用途

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

一个表单有三个基本组成部分：

• 表单标签：这包含了处理表单数据所用的URL以及数据提交到服务器的方式。

• 表单域(表单控件)：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

• 表单按钮：包括提交按钮、复位(重置)按钮和一般按钮；用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

HTML5新标签

标签	描述
form	定义供用户输入的表单
input	定义输入域
textarea	定义文本域 (一个多行的输入控件)
label	定义了 input 元素的标签，一般为输入标题
fieldset	定义了一组相关的表单元素，并使用外框包含起来
legend	定义了 fieldset 元素的标题
select	定义了下拉选项列表
optgroup	定义选项组
option	定义下拉列表中的选项
button	定义一个点击按钮
datalist	指定一个预先定义的输入控件选项列表
keygen	定义了表单的密钥对生成器字段
output	定义一个计算结果

form标签

​ 用来定义表单，可以包含多个表单元素

​ 常用属性

​ . action 提交数据给谁处理 , 即处理数据的程序,默认为当前页面

​ . method方法 ; 提交数据的方式，取值 : get(默认),post

​ get和post的区别

​ get: 以查询字符串形式提交，数据在地址栏中能看到，长度有限制，不安全

​ post: 以表单数据组形式提交，在地址栏中式看不到数据的，长度无限制，安全

​ . enctype ; 指定提交数据的编码，取值application/x-www-form-urlencoded(默认值), multipart/form-data(文件上传时使用)

单行文本框：下·

type/"表单"常用属性:

​ . name 名称,很重要,如果没有指定name,则该表单元素的数据时无法提交的

​ . value 初始值,

​ . size 宽度

​ . maxlength 最大的字符数

​ . readonly 只读,readonly=“readonly” ; 可以简写readonly,即只写属性名,不写属性,只是变为可读，但是数据依旧可以提交

​ . disabled 禁用 ; disabled=“disabled”, 可简写即disabled 完全禁用，服务器拿不到，数据不能提交

代码演示

 <form action="" method="get">
        
        
        
        
        
        
     
        <label for="text">*普通文本框： label><input type="text" name="text" id="text"><br>
     
        
        *密码文本框： <input type="password" name="password"><br>
     
        
        *数字输入框： <input type="number" name="number"><br>
     
        日期输入框： <input type="date" name="date"><br>
     
        
        
        电话号码输入框：<input type="tel" name="tel" maxlength="11"><br>
     
        
        邮箱输入框： <input type="email" name="email"><br>
     
        
        
        *单选框：<label><input type="radio" name="sex" value="男" checked>男label>
        <label><input type="radio" name="sex" value="女">女label><br>
        *复选框：<input type="checkbox" name="hobby" value="足球">足球
        <input type="checkbox" name="hobby" value="排球">排球
        <input type="checkbox" name="hobby" value="乒乓球">兵乓球<br>
     
        搜索框：<input type="search" name=""><br>
     
        
        *普通按钮：<input type="button" value="普通按钮"><br>
     
        
        *提交按钮：<input type="submit" value="提交按钮"><br>
     
         
        <input type="image" src="../02Day/image/华仔.png" height="50">
     
        
        重置按钮：<input type="reset" value="重置按钮"><br>
     
        
        文件上传框：<input type="file" name="file" accept="img/*"><br>
     
        
        隐藏域：<input type="hidden"><br>
     
        
        <textarea name="" id="" cols="30" rows="10">textarea><br>
     
        
        
        请选择课程:
        <select name="recouse">
            <optgroup label="理科">optgroup>
            <option value="高等数学">高等数学option>
            <option value="离散数学" selected>离散数学option>
            <option value="线性代数">线性代数option>
            <option value="概率论">概率论option>
        select>
    form>