HTML

HTML表单相关的标签

HTML 表单

  1. 表单是一个包含表单元素的区域。
  2. 表单元素是允许用户在表单中输入内容,比如:文> 本域(textarea)、下拉列表、单选框(radio-butt> ons)、复选框(checkboxes)等等。
  3. 表单使用表单标签 <form> 来设置.
<form>
    .
    input 元素
    .
</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签(<input>)。 输入类型是由类型属性(type)定义的。

单行文本域(Text Fields)

文本域通过 <input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

注意:表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。

<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
</form>

多行文本域(Textarea)

用户可在文本域中写入文本。可写入字符的字数不受限制

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

密码字段

密码字段通过标签<input type="password"> 来定义.

注意:密码字段字符不会明文显示,而是以星号或圆点替代

<form>
    Password: <input type="password" name="pwd">
</form>

单选按钮(Radio Buttons)

<input type="radio"> 标签定义了表单单选框选项

<form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
</form>

复选框(Checkboxes)

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

预选下拉框

创建一个简单的带有预选值的下拉列表

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮. 当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<!-- action定义这个form表单要提交的处理的程序,method定义了处理程序接受这个表单的传输方法 -->
<form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
    <!-- value值是提交按钮上显示的文字 -->
    <input type="submit" value="Submit">
</form>


其他类型以及新标签

<button>

<button> 标签定义一个按钮。 在 <button> 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

提示:请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。

<button type="button" onclick="alert('你好,世界!')">点我!</button>

HTML5 <datalist> 新标签

  1. <datalist> 标签规定了 <input> 元素可能的选项列表。
  2. <datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。

请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。

<form action="demo-form.php" method="get">
    <input list="browsers" name="browser">
    <datalist id="browsers">
          <option value="Internet Explorer">
          <option value="Firefox">
          <option value="Chrome">
          <option value="Opera">
          <option value="Safari">
    </datalist>
    <input type="submit">
</form>

HTML5 <output> 标签

<output> 标签作为计算结果输出显示(比如执行脚本的输出)

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

查看实例

<output> 标签属性以及属性值

属性 描述
for element_id 描述计算中使用的元素与计算结果之间的关系。
form form_id 定义输入字段所属的一个或多个表单。
nameN name 定义对象的唯一名称(表单提交时使用)。

表单应用实例

带边框的表单
<form action="">
    <fieldset>
        <legend>Personal information:</legend>
        Name: <input type="text" size="30"><br>
        E-mail: <input type="text" size="30"><br>
        Date of birth: <input type="text" size="10">
    </fieldset>
</form>

点击查看

发送邮件表单
<h3>发送邮件到 someone@example.com:</h3>
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
    Name:<br>
    <input type="text" name="name" value="your name"><br>
    E-mail:<br>
    <input type="text" name="mail" value="your email"><br>
    Comment:<br>
    <input type="text" name="comment" value="your comment" size="50"><br><br>
    <input type="submit" value="发送">
    <input type="reset" value="重置">
</form>

查看实例

form标签相关

标签 描述 备注
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签,一般为输入标题
<fieldset> 定义了一组相关的表单元素,并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮
<datalist> H5 指定一个预先定义的输入控件选项列表
<keygen> H5 废弃 定义了表单的密钥对生成器字段
<output> H5 定义一个计算结果
(0)

本文由 SilenceLee的学习笔记 作者:silencelee 发表,转载请注明来源!

热评文章

发表评论

解决 : *
28 ⁄ 7 =