编程笔记 html5&css&js 024 HTML表单元素

编程笔记 html5&css&js 024 HTML表单元素

  • [`<input>` 元素 最重要的表单元素是 `<input>` 元素。](#<input> 元素 最重要的表单元素是 <input> 元素。)
  • [`<select>` 元素(下拉列表)](#<select> 元素(下拉列表))
  • [`<option>` 元素定义待选择的选项。](#<option> 元素定义待选择的选项。)
  • [`<textarea>` 元素](#<textarea> 元素)
  • [`<button>` 元素](#<button> 元素)
  • [HTML5 表单元素](#HTML5 表单元素)

表单是由表单元素及其属性组成的,表单元素是一种"部件"或"控件",在HTML中叫元素。本节描述所有 HTML 表单元素。

<input> 元素 最重要的表单元素是 <input> 元素。

<input> 元素根据不同的 type 属性,可以变化为多种形态。

<select> 元素(下拉列表)

html 复制代码
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<option> 元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。您能够通过添加 selected 属性来定义预定义选项。

html 复制代码
<option value="fiat" selected>Fiat</option>

<textarea> 元素

<textarea> 元素定义多行输入字段(文本域):

html 复制代码
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<button> 元素

<button> 元素定义可点击的按钮:

html 复制代码
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML5 表单元素

HTML5 增加了如下表单元素:

html 复制代码
<datalist>
<keygen>
<output>

注释:默认地,浏览器不会显示未知元素。新元素不会破坏您的页面。

HTML5 <datalist> 元素
<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

html 复制代码
通过 <datalist> 设置预定义值的 <input> 元素:
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>
相关推荐
小高0071 小时前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
东坡白菜1 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
小桥风满袖2 小时前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
前端人类学2 小时前
掌控异步洪流:多请求并发下的顺序控制艺术
javascript·promise
CryptoRzz3 小时前
印度尼西亚股票数据API对接实现
javascript·后端
lecepin4 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
猩兵哥哥4 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
江城开朗的豌豆5 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
江城开朗的豌豆5 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
Asort5 小时前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript