学习笔记-2017.2.8

表单和输入

1、文本域、密码域、单选按钮、复选框、提交按钮、下拉列表、预选下拉列表。

<form>
    文本域：<input type="text" name="">
    密码域：<input type="password" name="">
    单选：a<input type="radio" name="">
    复选：a<input type="checkbox" name="">b<input type="checkbox" name="">
    <input type="submit" name="">
    <select>
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
    </select>
    <select>
        <option value="">1</option>
        <option value="">2</option>
        <option value="" selected>3</option>
    </select>
</form>

2、点击其中一个文本标签选中选项

<form action="#">
<label for="a">a</label>
<input type="radio" name="letter" id="a" value="a">
<label for="b">b</label>
<input type="radio" name="letter" id="b" value="b">
<input type="submit" name="">
</form>

3、对表单中的相关元素进行分组

<form action="#" method="get">
<fieldset>
    <legend>this is a demo</legend>
    A:<input type="text" name="">
    B:<input type="text" name="">
</fieldset>
</form>

4、select属性
disabled：禁用下拉列表
multiple：可选择多个选项
（multiple 属性是一个布尔属性。在不同操作系统和浏览器中，选择多个选项的差异。对于 windows：按住 Ctrl 按钮来选择多个选项；对于 Mac：按住 command 按钮来选择多个选项）
required：必须选择一项
size：下拉列表中可见的项目

<select disabled="true">
    <option>111</option>
    <option>222</option>
    <option>333</option>
    <option>444</option>
</select>
<select multiple="true">
    <option>111</option>
    <option>222</option>
    <option>333</option>
    <option>444</option>
</select>
<select required>
    <option>111</option>
    <option>222</option>
    <option>333</option>
</select>
<select size="2">
    <option>111</option>
    <option>222</option>
    <option>333</option>
</select>

5、<optgroup>标签:把相关的选项组合在一起。

<select>
    <optgroup label="ABC">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
    </optgroup>
    <optgroup label="123" disabled>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </optgroup>
</select>

6、<datalist> 为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。使用 <input> 元素的 list 属性来绑定 <datalist> 元素。

<form action="#" method="get">
<input list="abc">
<datalist id="abc" name="A">
    <option value="Aaaa">
    <option value="Bbbb">
    <option value="Cccc">
    <option value="Dddd">
</datalist>
<input type="submit">
</form>

7、<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。

<form action="#" method="get">
用户名：<input type="text" name="">
加密：  <keygen name="security"></keygen>
       <input type="submit">
</form>

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

9、HTML音频/视频/多媒体

<audio controls>
<source src="a.ogg" type="audio/ogg">
<source src="a.mp3" type="audio/mpeg">
</audio>
<!-- 音频 -->
<video width="320" height="240" controls>
    <source src="a.mp4" type="video/mp4">
    <source src="a.ogg" type="video/ogg">
</video>
<!-- 视频 -->
<embed src="helloworld.swf">
<!-- 定义嵌入的内容 -->
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
<!-- 用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的。 -->

10、 contenteditable 属性指定元素内容是否可编辑。当元素中没有设置 contenteditable 属性时，元素将从父元素继承。

<p contenteditable="true">这是一个段落。是可编辑的。尝试修改文本。</p>

11、data-* 属性：用于存储私有页面后应用的自定义数据： 1、属性名不要包含大写字母，在 data- 后必须至少有一个字符。 2、该属性可以是任何字符串。

<h1>物种</h1>
<p>点击一个物种，看看它是什么类型：</p>
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>
<script>
function showDetails(animal)
{
    var animalType = animal.getAttribute("data-animal-type");
    alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>

12、hidden 属性规定对元素进行隐藏。隐藏的元素不会被显示。如果使用该属性，则会隐藏元素。可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。然后，可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。

<p>这是可见的段落</p>
<p hidden>这是隐藏的段落</p>

学习笔记-2017.2.8

表单和输入

推荐阅读更多精彩内容