表单元素盘点第三弹 ＜button＞＜select＞＜optgroup＞

 

📚博主有话说：如果有描述错误之处请大家纠正。让我们一起学习一起进步。

📃内容专栏：表单和输入

🧸此块内容为纯纯的干货，略显乏味枯燥，是笔记向的blog。如果觉得还不错，希望你可以一键三连，一整个大感谢。

前情回顾：

<from><textarea>元素详细介绍

＜input＞元素详细介绍_GUIDM的博客-CSDN博客

HTML5结构标签_GUIDM的博客-CSDN博客

这一期介绍表单家族中的三个元素！继续加油干。

<button >:

定义一个按钮。

在button元素内部，可以置放内容（如文本或图像）这是与input元素创建按钮之间的不同之处。

<button></button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，如文本或多媒体内容。

唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

如果在HTML表单中使用button元素，不同的浏览器会提交不同的按钮值，请使用input元素在html表单中创建按钮。

属性：

• autofocus属性：

规定当前页面加载时按钮应当自动地获得焦点。

<button type="button" autofocus> click it </button>

• disabled属性：

规定禁用按钮，被禁用的按钮既不可用，也不点击。

<button type="button" disabled> click me </button>

• form:属性

规定按钮属于一个或多个表单，属性值必须是按钮所属表单的id

<form action="/example.asp" method="get" id="nameform"> 
……
</form> 
<p>下面的按钮位于form元素之外，但仍是表单一部分</p> 
<button type="submit" form="nameform" value="Submit">提交</button>

• foraction属性：

覆盖form元素的action属性（与type="submit"配合使用）

<form action="demo_form.sap" method="get"> 
…… 
<button type="submit">提交</button> 
<button type="submit" formaction="demo_admin.asp">以管理员身份提交</button> 
</form>

• formentype属性（与type="submit"配合使用）
• formethod属性（与type="submit"配合使用）
• formnovalidate属性（与type="submit"配合使用）
• formtarget属性（与type="submit"配合使用）

注：这些与input的用法相同就不介绍了。

• name属性：

规定按钮名称，用于在JS中对元素进行引用，或在表单提交之后，对表单数据进行引用。

不同的button元素可以共享相同的名称。

• type属性：

规定按钮的类型。

属性值：

1. submit：提交按钮（默认值）
2. button：可点击的按钮
3. reset：重置按钮

<button type="submit" value="Submit">Submit</button>

• value属性：

指定<form>中的<button>的初始值，仅当按钮本身用于提交表单时，才会提交按钮及其值。

<button name="subject" type="submit" value="fav-HTML">HTML</button>

<select>:

可创建单选或多选菜单。

<select>元素中的<option>标签用于定义列表中的可用选项。

属性：

• autofocus属性（逻辑属性）：

当设置该属性后，它规定在页面加载后下拉列表应该自动获得焦点。

<select autofocus> 
<option value="volvo">Volvo</option>
 …… 
</select>

• disabled属性

规定禁用下拉列表，被禁用的下拉列表既不可用也不可点击。

<select disabled> 
<option value="volvo">Volvo</option> 
…… 
</select>

• form属性：

规定下拉列表所属的一个或多个表单，属性值必须是同一个文档中的某个<form>元素的id属性。

<form action="demo_form.asp" id="carform"> 
…… 
<input type="submit"> 
</form> 
<p>下面的select位于form元素外，但仍属于表单的一部分</p> 
<select name="carlist" form="carform"> 
<option value="volvo">Volvo</option> 
…… 
</select>

• multiple属性：

规定可同时选择多个选项，可以把multiple属性与size属性配合，来定义可见选项的数目。

<select multiple size="2"> 
<option value="volvo">Volvo</option> 
…… 
</select>

• required 属性：

所有主流浏览器都不支持。

规定用户在提交表单之前必须选择一个值。

<select required> 
<option value="volvo">Volvo</option> 
…… 
</select>

• size 属性：

规定下拉列表中可见选项的数目。

如果size属性的值大于1，但小于列表中选项的总数目，浏览器会显示出滚动条。

<select size="2"> 
<option value="volvo">Volvo</option>
 …… 
</select>

<optgroup>:

定义选项组，用于组合选项，当使用一个选项列表时，对于相关的选项进行组合会使处理更加容易。

• 必需属性：

label：规定描述

<select> 
<optgroup label="Swedish cars"> 
<option value="volvo">Volvo</option>
 …… 
</option> 
</select>

• 可选属性：

disabled：规定禁用该选项组。被禁用的选项组既不可用也不可点击。

<select> 
<optgroup label="Swedish cars" disabled> 
<option value="volvo">Volvo</option>
 …… 
</option> 
</select>

感谢兄弟们能看到最后最后附上一张我用wolai做的笔记