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

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


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

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

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

<select> 元素(下拉列表)

<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 属性来定义预定义选项。

<option value="fiat" selected>Fiat</option>

<textarea> 元素

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

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

<button> 元素

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

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML5 表单元素

HTML5 增加了如下表单元素:

<datalist>
<keygen>
<output>

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

HTML5 <datalist> 元素

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

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

通过 <datalist> 设置预定义值的 <input> 元素:
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 


相关文章
|
7天前
|
前端开发 容器
CSS对行级元素的影响
【7月更文挑战第4天】CSS对行级元素的影响
11 2
|
11天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
13天前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
15 2
|
7天前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
9 0
|
11天前
|
JavaScript
JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
|
11天前
|
前端开发
css实战——清除列表中最后一个元素的下边距
css实战——清除列表中最后一个元素的下边距
14 0
|
11天前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
9 0
|
12天前
|
前端开发
css 超实用的:empty —— 隐藏空元素、缺失字段智能提示
css 超实用的:empty —— 隐藏空元素、缺失字段智能提示
10 0
|
13天前
|
前端开发
前端 CSS 经典:保持元素宽高比
前端 CSS 经典:保持元素宽高比
14 0
|
13天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】Animated Navigation
【HTML+CSS+JavaScript】Animated Navigation
8 0