5.HTML5常用表单元素一览表

1.<form> 元素

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
表单元素(form element),又称为表单控件(form control)。
.
</form> 
form属性描述
accept-charset规定在被提交表单中使用的字符集(默认:页面字符集)。
action规定向何处提交表单的地址(URL)(提交页面)。
autocomplete规定浏览器应该自动完成表单(默认:开启)。
enctype规定被提交数据的编码(默认:url-encoded)。
method规定在提交表单时所用的 HTTP 方法(只支持GET和POST方法,默认:GET)。
name规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate规定浏览器不验证表单。
rel规定链接资源和当前文档之间的关系。
target规定 action 属性中地址的目标(默认:_self)。

2.<label> 元素

如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<label for="绑定的表单控件ID">绑定的表单控件的文字描述</label>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

3.<input> 元素

input元素/type属性描述
隐藏类型<input type=”hidden”>
文本类型<input type=”text” name=”firstname”>
搜索类型<input type=”search” name=”googlesearch”>
电话号码类型<input type=”tel” name=”usrtel”>
URL类型<input type=”url” name=”homepage”>
E-mail类型<input type=”email” name=”email”>
密码类型<input type=”password” name=”psw”>
时间类型<input type=”time” name=”usr_time”>
日期类型<input type=”date” name=”bday”>
周类型<input type=”week” name=”week_year”>
月份类型<input type=”month” name=”bdaymonth”>
本地日期和时间类型<input type=”datetime-local” name=”bdaytime”>
数字类型<input type=”number” name=”quantity” min=”1″ max=”5″>
区间范围类型<input type=”range” name=”points” min=”0″ max=”10″>
颜色类型<input type=”color” name=”favcolor”>
单选框类型<input type=”radio” name=”sex” value=”male” checked>
复选框类型<input type=”checkbox” name=”vehicle” value=”Bike”>
文件类型<input type=”file” id=”formFileDisabled” disabled>
按钮类型<input type=”button” onclick=”alert(‘Hello World!’)” value=”Click Me!”>
重置按钮类型<input type=”reset”>
提交按钮类型<input type=”submit” value=”Submit”>
图片按钮类型<input type=”image” src=”graphic.gif”>
input元素/其它属性描述
autofocus规定当页面加载时 <input> 元素应该自动获得焦点。
disabled规定输入字段应该被禁用。
form规定 <input> 元素所属的一个或多个表单。
formaction与<form>中的<action>作用一样,规定当提交表单时处理该输入控件的文件的 URL,但区别是可为多个<input>或<button>提交提供多个不同的URL。
formenctype规定当把表单数据(form-data)提交至服务器时如何对其进行编码(仅针对 method=”post” 的表单)。
formmethod用以向 action URL 发送表单数据(form-data)的 HTTP 方法。
formnovalidate规定在提交表单时不对 <input> 元素进行验证。
formtarget规定的名称或关键词指示提交表单后在何处显示接收到的响应。
height 和 width规定 <input> 元素的高度和宽度。
list引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。
maxlength规定输入字段的最大字符数。
minlength规定输入字段的最小字符数。
max规定输入字段的最大值。
min规定输入字段的最小值。
multiple规定允许用户在 <input> 元素中输入一个以上的值。
pattern规定通过其检查输入值的正则表达式。
placeholder规定用以描述输入字段预期值的提示。
readonly规定输入字段为只读(无法修改)。
required规定输入字段是必需的(必需填写)。
size规定输入字段的宽度(以字符计)。
step规定输入字段的合法数字间隔。
name表单控件名称。
value表单控件的默认值或最终输入值。

4.<textarea> 元素

<textarea name="表单控件的名称" rows="10" cols="30">表单控件的默认值或最终输入值</textarea>

5.<button> 元素

<button type="button" name="表单控件的名称" value="表单控件的值">Click Me!</button>

推荐使用 <button> 元素替代 <input> 元素中的相关功能。

//按钮类型
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
//等同于
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
//重置按钮类型
<button type="reset">重置</button>
//等同于
<input type="reset" value="重置">
//提交按钮类型
<button type="submit">Submit</button>
//等同于
<input type="submit" value="Submit">
//图片按钮类型
<button type="button"><img src="graphic.gif"></button>
//等同于
<input type="image" src="graphic.gif">

6.<select> 元素、<option>元素、<optgroup>元素

select的下拉菜单是供用户选择的,用户只能选择其中的选项不能自己添加。

如果不含 value 属性,则 value 值默认为元素中的文本内容。

<select name="表单控件的名称"></select>
<option value="表单控件的值" label="辅助用户选择时的文字" selected="是否此选项默认被选择"></option>
<optgroup label="辅助用户选择时的文字"></optgroup>
<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

7.<datalist> 元素

datalist不仅可以供用户选择,用户还可以自己输入,而且datalist还可以达到模糊匹配的效果。

<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>

7.<fieldset> 元素和<legend> 元素

<fieldset> 元素组合表单中的相关数据,<legend> 元素为 <fieldset> 元素定义标题。

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form> 

8.<progress> 元素

<progress value="当前值" max="最大值"></progress>
<section>
 <h2>Task Progress</h2>
 <p>Progress: <progress id=p max=100><span>0</span>%</progress></p>
 <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
 </script>
</section>

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/javascript/htmlcss/3845.html

(0)
上一篇 2020年6月4日 00:24
下一篇 2020年6月5日 16:47

相关推荐

发表评论

登录后才能评论