常用表单元素使用

伊利同学

已于 2024-01-02 11:40:34 修改

阅读量901

点赞数 15

文章标签：前端 javascript java

于 2023-12-09 10:15:22 首次发布

本文链接：https://blog.csdn.net/liyil66464/article/details/134891457

版权

from表单的定义

form 表单在网页中主要负责数据采集功能，属于一个容器标记

表单分为三个部分，表单域、表单元素、提示信息

表单的组成

form元素用来创建表单，语法格式如下：

<form action="" method="" name="" enctype="">
     ...
</form>

`action`	属性用于指定接收并处理表单数据的服务器程序的URL地址
`name`	属性用于指定表单的名称，以区分同一个页面中的多个表单
`method`	设置表单的提交方式（主要有`post`和`get`）
`enctype`	设置编码类型

使用 get 方法提交，通过 url提交数据，数据在 url中可以看到，所以，敏感信息不能使用 get方法提交；而且，get方式提交的数据大小有限制（因为浏览器对 URL 的长度有限制）；

使用 post方法提交，与 get方法不同，数据放在HTTP包的body中且对提交的数据大小没有限制

表单元素

表单控件包含了具体的表单功能项，主要用来收集用户数据，包括 label(标签)、input、textarea、select、datalist、keygen 等，还有对组件分组显示的 fieldset 和 legend 控件。

根据功能的不同，input 又可以分为 text、password、radio、checkbox、file、submit、reset、search、tel、url、email、number、range、color、Date Pickers 等类型

属性	作用
input	用户输入，用来收集用户的信息
type	属性值
name	定义元素名称
value	元素的初始值，type为radio时必须指定一个值
checkbox	复选框

表单按钮

包括普通按钮、提交按钮(submit)和重置按钮(reset)。

表单控件input 标签

input 标签输入类型是由类型属性 type 定义的。

基本语法：

<form>
    <input name="控件名称" type="控件类型"/>
</form>

<input />标记为单标记，type 属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。

<input />标记属性特点：

value可以设置默认值
实现单选功能，需要设置name的值相同
当type类型选择file类型时可以设置属性指定某种特殊类型
accetp 用于指定类型
multiple 允许多选
readonly 只读，不能修改
checked 默认选中
disabled 禁止操作

二、表单元素

type的属性值

text	文本框
password	密码框
radio	单选按钮
checkbox	复选框
select和option	列表框
button	普通按钮
submit	提交按钮
reset	重置按钮
textarea	文本域
range	滑块

代码示例：

文本框：输入文本

<input type="text" name="userName" value="初始值" size="长度" maxlength="最多输入的字符">

密码：输入密码

<input name="pass"  type="password">

提交：提交按钮

<input type="submit" name="Butllon" value="提交">

重置：重置按钮

<input type="reset" name="Reset" value="重置">

单选按钮：单选

<input name="gen" type="radio" value="提交显示的值"> 值

复选框按钮：可以重复选择

<input type="checkbox" name="interest" value="提交显示的值"> 值

下拉列表：下拉框

<select name="列表名称" size="行数">

                <option value="显示值" selected="默认选中的项"></option>

                </select>

多行文本域：可以输入多行文本

<textarea name="show" cols="列数" rows="行数">内容</texarea>

运行结果如下：

checked：默认，类型为radio或checkbox时，指定按钮是否被选中

       //checkbox复选框
        //checked默认选择
 <span>
爱好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
学习<input type="checkbox" checked>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
打篮球<input type="checkbox">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
看电视<input type="checkbox">
</span><br><br>
        //下拉列表
        <span>地址&nbsp;&nbsp;&nbsp;&nbsp;<select name="郴州" >
            <option>永州</option>
            <option>湖南</option>
            <option>郴州</option>
        </select></span><br><br>

运行结果如下：

下拉表单元素是什么呢？就是万一选择的选项很多，全部排列出来不美观，这时候就需要它了，用的时候可以拿出来，不需要的时候可以隐藏起来

表单按钮如下：

代码示例

readonly：只读文本框
disabled：禁用
placeholder：提示输入
required：必填
文本域标签其实和前面的<input>中的type属性值中的text相似，不过却不一样。当你输入的文本很多时，text属性值只能控制范围是一行，而这时候textarea文本域的作用来了

 //多行文本域 col列   rows行
<span>
            自我介绍<textarea name="show" cols="23" rows="3"></textarea>
        </span>
<br><br>
        //文件
        <span><input type="file">未选择任何文件</span><br><br>
        
           //邮件   disabled是禁用
        <span>邮件&nbsp;&nbsp;&nbsp;<input type="email" disabled></span><br><br>

        <span>网址&nbsp;&nbsp;&nbsp;<input type="url"></span><br><br>

        <span>金额&nbsp;&nbsp;&nbsp;<input type="number"></span><br><br>

        <span>滑块<input type="range"></span><br><br>
        <input type="submit" value="提交">&nbsp;&nbsp;&nbsp;
        <input type="reset" value="重置">&nbsp;&nbsp;&nbsp;
        <input type="button" value="普通按钮">&nbsp;&nbsp;&nbsp;

运行结果如下：