HTML基础之form表单

简介: HTML基础之form表单

前言:


这里的表单指的是文本框、按钮、下拉列表等的统称。


一:表单属性


表单一共有五个重要属性:name 、 action、 method 和 target属性


1 name 属性


一个页面上的表单可能不止一个,为了区分这些表单,就需要name 属性给表单命名,通常与id属性值相同。需要注意的是表单名称中不能包含特殊字符和空格。


2 action属性


用于指定表单数据提交到那个地址进行处理。


3 method属性


作用是告诉浏览器,指定将表单中的数据使用哪一种HTTP提交方法,取值为get 或者 post。


其中:get 是默认值,表单中的数据被传送到action 属性指定的URL,然后这个新的URL 被传送到处理程序上。


post:表单数据被包含在表单主体中,然后被传送到处理程序上。


两者区别:


get:该请求会将请求参数的名和值转换成字符串,然后拼接到URL 之后,因此在地址栏等地方可以看到请求的参数;但是安全性差,并且安全性差,传输的数量比较小,在URL中的最大长度是2048个字符。


post:该请求方式通过HTTP的post 机制,将所有的请求参数的名和值放在HTML的header 中传输;并且安全性号,传输的数量也大。


4 target属性


该属性与a标签的target 属性一样,都是从来指定目标窗口的打开方式。


取值:


_self: 默认值,表示在当前的窗口打开页面。


_blank:在新的窗口打开页面。


_top: 表示页面载入到包含该链接的窗口,取值在当前的窗口中的所有页面。


_parent: 在父级窗口打开页面。


5 enctype属性


用于设置表单信息提交的编码方式;


取值:


application / x-www-form-urlencoded :默认编码方式;


multipart / form-data : MIME 编码,对于“上传文件” 这种表单必须选择该值;


text / plain: 空格转换为加号(+),但不对特殊字符编码。


二:表单对象


就是放在form 标签内的各种标签,有:input、textarea、select、option、button、label、otpgroup等。


1 input标签


type属性的值:


text:单行文本框


value :定义文本框的默认值,也就是文本框内的文字。


size:定义文本框的长度,单位是一字符。


maxlength :设置文本框最多可以输入的字符数。


radio:单选按钮,name 和 value 是单选按钮中的必要的两个属性,必须要设置。并且同一组单选按钮中各个选项中的 name 属性值必须一样。


checkbox: 普通按钮,checked 属性表示该选项在默认情况下已经被选中。


button:普通按钮


value 属性的取值就是显示在按钮上的文字,onclick 是普通按钮的事(js)


submit: 提交按钮,value 属性的取值就是显示在按钮上的文字,实现将表单内容提交给服务处理。


resrt:重置按钮,value 属性的取值就是显示在按钮上的文字,单击可清除用户在页面当前表单中输入的信息。


file:文件上传,当使用文件域file 时,必须在form标签中指明编码方式,enctype="multipart/form-data",以确保服务器正常接收数据。


image:图片域,拥有按钮的特点,也拥有图像的特点(不常用)。


hidden:隐藏字段(不常用)。


input标签的其他属性:


checked:设置单选框、复选框,初始状态是选中,属性值仅有checked。


disabled:设置首次加载禁用该元素,属性值仅有disabled,表示该元素被禁用。


maxlength:设置文本框输入的最大字符数。


readonly:只读,表示文本框的内容不允许用户直接进行修改。


size:设置该元素的宽度。


src:设置图像域所显示的图像的URL。


<form name="myform" method="post" action="index.html">
      姓名:<input type="text"  value="" size="15" maxlength=""/>
                  <br/>
      年龄:<input type="text" value="18" size="3" maxlength="3"/>
                  <br/>
        账号:<input type="text" />
                  <br/>
      密码:<input type="password" />
                  <br/>
      年级:<input readonly="年级" />
      </form>
      <div>


c7a567624f0146828001413bc15649bb.png

2 多行文本textarea


rows:指定可输入的行数。


cols:指定可输入的列数。


readonly:用于指定该文本只读,该属性的值只能是readonly。


3 下拉列表select


下拉列表由select和option两个标签配合使用。


select标签属性:


multiple:可选择属性,只有一个值“multiple”,设定该值是下拉列表可选择多个项,默认只能选择一项。


size:下拉列表展开后可见列表项的数目,需要注意的是不同浏览器的默认值不                            同。


option标签属性:


value:选择值。


selected:是否被选中。


optgroup标签属性:


label:指定该选项组的标签,这个属性必须设置。


       <form>
        <input type="text" value="这是一个文本框" /><br/>
        <textarea></textarea><br/>
        <select>
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
        </select>
    </form>

c7f9e63174444b98bae3f0ed7724cf22.png

4 表单控件(元素)button


用于定义一个按钮,元素内部可包含普通文、文本格式化元素、图片等。提供了更加丰富的显示内容和视觉效果。


type属性智能有button、resert、submit 3种。


5 表单控件(元素)label标签


用于对其他表单控件(元素)进行说明,主要用于单机<label>元素生成标签,浏览器会自动将焦点转移到和标签相关的表单控件上。


label标签和表单控件关联的方式有两种:


使用label标签和for属性,指定为关联表单控件(元素)的id即可;


将说明和表单控件一起放在label 元素内部即可。


<form action="" method="get" name="" enctype="" target="">
      用户名 <input type="text" name="用户名" id=""/><br/>
      邮箱  <input type="email" name="dly" /><br/>
      <select>
        <option>qq.com</option>
        <option>weixin.com</option>
        <option>xinlaing.com</option>
      </select>
      <p>
      性别 <input type="radio" name="people" value="boy" />男
           <input type="radio" name="people"  value="gile"/>女<br/>
      爱好 <input type="checkbox" id="" value="" />乒乓球
           <input type="checkbox" id="" value="" />篮球
         <input type="checkbox" id="" value="" />排球
      </p>
    上传文件 <input type="file" value="选择文件"/><br/>
    <input type="submit" />
    <input type="resest" /><br/>
    生日 <input type="data" name="生日" id="" />
      </form>

3ddbf5cb38a048b281950ab93f9f6579.png


>
>✨$\textcolor{blue}{原创不易,还希望各位大佬支持一下}$ <br/>
>👍 $\textcolor{green}{点赞,你的认可是我创作的动力!}$ <br/>
>⭐️ $\textcolor{green}{收藏,你的青睐是我努力的方向!}$ <br/>
>✏️ $\textcolor{green}{评论,你的意见是我进步的财富!}$ <br/>


相关文章
|
3天前
|
移动开发 JavaScript 前端开发
HTML5 表单属性详解
HTML5引入了多种新的表单属性,使表单创建与验证更加便捷高效。新增的输入类型包括`email`、`url`、`tel`等,常用属性有`placeholder`、`required`等。表单元素如`&lt;form&gt;`可设置提交方法和目标URL,`&lt;button&gt;`及`&lt;input type=&quot;submit&quot;&gt;`用于提交。新元素`&lt;datalist&gt;`和`&lt;output&gt;`提供更多功能。HTML5还提供了内置表单验证机制,增强用户体验。
|
4天前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `&lt;form&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;` 和 `&lt;button&gt;`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`&lt;input&gt;` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。
|
16天前
|
移动开发 前端开发 JavaScript
HTML 表单和输入详解
HTML 表单是收集用户输入的关键组件,包括多种输入控件如文本框、单选框、复选框、下拉列表等。表单由 `&lt;form&gt;` 标签定义,常用属性有 `action` 和 `method`。输入控件如 `&lt;input&gt;` 和 `&lt;select&gt;` 可实现不同类型的用户输入,而 `&lt;button&gt;` 用于提交表单。HTML5 还提供了表单验证功能,如 `required` 和 `pattern` 属性,确保输入的有效性。结合 JavaScript 可实现更复杂的表单逻辑。掌握表单是前端开发的基础技能之一。
|
16天前
|
JavaScript 前端开发
HTML 表单和输入与按钮的联动方法汇总
在HTML中,通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构,并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧,帮助你更好地控制和优化表单功能。
|
2月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
2月前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
38 4
|
2月前
|
前端开发
酷炫表单,触感未来:HTML与CSS动画的创新应用!
酷炫表单,触感未来:HTML与CSS动画的创新应用!
|
4月前
|
数据采集 JavaScript 前端开发
HTML表单深度解析:构建互动的网页界面
HTML表单深度解析:构建互动的网页界面
|
3月前
|
数据安全/隐私保护
HTML4(三):表单
HTML4(三):表单
22 0
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
一篇教你学会HTML:常用标签 | 表格 | 表单 | 特殊符号转义
一篇教你学会HTML:常用标签 | 表格 | 表单 | 特殊符号转义
下一篇
无影云桌面