常见表单元素的使用

表单是什么

HTML 表单用于收集用户的输入信息。
表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素

一, from

一般格式:

<from name="名字" action="提交的路径" method="POST/GET">


</from>

:

🍧 Action 属性

• 背景：通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。
• 作用：规定当提交表单时向何处发送表单数据。action 默认值为当前页面。
• 语法：< form action=“URL”> < /form >。
• 关于URL值：
  默认值 : 为当前页面。
  绝对 URL：指向另一个网站（比如 action = “http://www.example.com/example.htm”。
  相对 URL：指向网站内的一个文件（比如 action=“example.htm”）。
  :

🍧 Method 属性

• 作用：指定提交表单数据时要使用的 HTTP 方法

• 使用get方式（默认）语法：< form action=“/action_page.php” method=“get” >
  使用post方式语法< form action=“/action_page.php” method=“post”>

• 两种方法的一个明显区别是，get提交的参数在浏览器的地址栏中可见，而post则不可见。如果表单数据包含敏感信息或个人信息，请务必使用 POST！

---

• 关于 GET 的注意事项：
• 以名称/值对的形式将表单数据追加到 URL
  永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
• URL 的长度受到限制（2048 个字符）
• 对于用户希望将结果添加为书签的表单提交很有用
  GET 适用于非安全数据，例如 Google 中的查询字符串

---

• 关于 POST 的注意事项：
• 将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
• POST 没有大小限制，可用于发送大量数据。
  带有 POST 的表单提交无法添加书签

:

二,input

input表示输入框，有多种形式，可以根据type属性来确定显示哪种输入框

• 常用属性:

1. name属性：类型为text，该属性规定元素的名称。
2. pattern属性：类型为regexp，该属性用于设定验证元素值的正则表达式。
3. size属性：类型为number，该属性规定以字符数计的元素的可见宽度。
4. type属性：该属性设定要显示的元素的类型。

🍧 常见的type属性

type	说明
text	单行文本输入框
password	密码输入框
email	email输入框
number	数字输入框
tel	手机号输入框
url	url输入框
file	file输入框
range	滑块输入框
search	搜索
radio	单选框
checkbox	复选框
submit	提交
reset	重置
button	按钮

---

代码:

<form action="提交数据的路径" method="POST/GET">
    文本输入框：<input type="text" value="值" placeHolder="输入框提示" id="id" name="输入框名字" disabled="禁用" readonly="只读" required="输入框必填" hidden="隐藏"
                 pattern="正则表达式" maxLength="最大长度" minLength="最小长度" size="输入框的长度">
    <br>
    密码输入框:<input type="password" value="值">
    <br>
    email输入框:<input type="email" value="值">
    <br>
    数字输入框:<input type="number" value="值">
    <br>
    手机号输入框:<input type="tel" value="值">
    <br>
    url:<input type="url" value="值">
    <br>
    文件:<input type="file" value="值">
    <br>
    滑块:<input type="range" value="值">
    <br>
    搜索:<input type="search" value="值">
    <br>
    单选按钮:<input type="radio" value="值">
    <br>
    复选框:<input type="checkbox" value="值">
    <br>
    提交:<input type="submit" value="提交">
    <br>
    重置:<input type="reset" value="重置">
    <br>
    按钮:<input type="button" value="按钮">
</form>

演示:

:

🍧text属性

属性	说明
type	类型
value	值
placeholder	输入框提示
id	id
name	输入框名字
disabled	禁用
readonly	只读
required	必填
hidden	隐藏
pattern	正则表达式
size	长度
maxLength	最大长度
minLength	最小长度

:

三,select,option下拉框

select

• 作用：< select>元素用来创建下拉列表。 < option> 标签定义了列表中的可用选项。
• 语法：< select name=“text” multiple size=“number” >

option

语法: < option value=“value” disabled selected >

• selected属性：类型为布尔属性，设置默认预选项，被预选的选项会显示在下拉列表最前面的位置。

演示:

 城市:<select name="名字" id="id">
    <option value="值"> 北京</option>
    <option value="值"> 上海</option>
    <option value="值"> 广州</option>
    

🍧selected属性

类型为布尔属性，设置默认预选项，被预选的选项会显示在下拉列表最前面的位置

 城市:<select name="名字" id="id">
    <option value="值"> 北京</option>
    <option value="值"> 上海</option>
     <option value=" 值" selected > 广州</option>
    

对比:

四,textarea

• 作用：定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
• 注意：可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

语法：< textarea name=“text” maxlength=“number” >

五, button

• 作用：定义一个按钮。
• 注意：不同的 button 元素可以共享相同的名称。这就允许您标记带有相同名称的若干按钮，以便在表单中使用时能够提交不同的值。
• 对比：在元素内部，可以放置内容，比如文本或图像。这是该元素与使用元素创建的按钮之间的不同之处。

语法：< button name=“name” type=“type” value=“value” >

属性	按钮类型
button	为普通按钮
reset	重置按钮
submit	提交按钮。

:
OK,以上就是关于表单元素的全部使用啦