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">
        <!-- name可以为表单控件起名，其名称在提交表单时会传输给服务器 -->
        <!-- value可以为文本框赋默认值 -->
        <!-- readonly表示只读 -->
        <!-- required表示该信息必填 和表单域结合可以呈现验证内容 -->
        <!-- disabled表示禁用 在页面中呈现灰色 -->
        <!-- placeholder可以指定文本框输入前的信息提示 -->
     
        <label for="text">*普通文本框： </label><input type="text" name="text" id="text"><br>
     
        <!-- type="password" 表示密码文本框，其输入的内容以密文的形式出现 -->
        *密码文本框： <input type="password" name="password"><br>
     
        <!-- type="number" 表示数字数据库，只允许用户输入数字，小数或者负数 -->
        *数字输入框： <input type="number" name="number"><br>
     
        日期输入框： <input type="date" name="date"><br>
     
        <!-- type="tel" 在移动端会调起数字键盘 -->
        <!-- maxlength="11"表示输入最大的字符数 -->
        电话号码输入框：<input type="tel" name="tel" maxlength="11"><br>
     
        <!-- type="email" 在移动端会显示@ -->
        邮箱输入框： <input type="email" name="email"><br>
     
        <!-- type="radio" 使用name属性可以让单选按钮进行分组 name相同时一次只能选择一个 -->
        <!-- checked表示默认选中 -->
        *单选框：<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>
     
        <!-- type="button"在value属性中可以显示按钮的内容 -->
        *普通按钮：<input type="button" value="普通按钮"><br>
     
        <!-- type="submit" 结合(form)表单域实现提交效果
		在表单中 submit 点击之后会自从触发提交行为，会向action指定的地址提交，请求方式为method指         定的方式通常表单提交为post
		-->
        *提交按钮：<input type="submit" value="提交按钮"><br>
     
         <!-- 图片会被当作一个按钮 -->
        <input type="image" src="../02Day/image/华仔.png" height="50">
     
        <!-- reset表示重置按钮，会让表单回到默认值-->
        重置按钮：<input type="reset" value="重置按钮"><br>
     
        <!-- accept属性可以过滤文件 -->
        文件上传框：<input type="file" name="file" accept="img/*"><br>
     
        <!-- 隐藏域在页面不可见，但是可以随着表单一起提交给服务端-->
        隐藏域：<input type="hidden"><br>
     
        <!-- cols相当于width rows相当于heigh -->
        <textarea name="" id="" cols="30" rows="10"></textarea><br>
     
        <!-- selected指定默认选中 -->
        <!-- optgroup可以进行分组 label="理科"属性命名分组的标题 -->
        请选择课程:
        <select name="recouse">
            <optgroup label="理科"></optgroup>
            <option value="高等数学">高等数学</option>
            <option value="离散数学" selected>离散数学</option>
            <option value="线性代数">线性代数</option>
            <option value="概率论">概率论</option>
        </select>
    </form>