第十二章 设计表单

12.1 理解表单

<form action="/form-processing-script" method="post">

action属性指定了表单提交后，将对其进行处理的服务器端脚本的url

method属性有两个取值：post和get，post将表单数据包含在表单主体中，并将其发送给Web服务器。

get就是将输入的数据以明文的方式显示在url的尾部

<form action="..." method="post">
  <label for="username">Username</label>
    <input type="text" name="username">
  <label for="password">Password</label>
    <input type="password"name="password">
  <input type="submit" class="submit" value="Log in">
</form>

这是一个简单的登陆界面，type属性是输入的数据类型，其中<input>中的name或者id要和<label>中的for一样

value是用于设置提交按钮的标签，

<form>有一个新增属性autocompelete,它有两个值：

on: 开启自动补全

off:关闭自动不全

12.3 使用属性<label>

<label for="...">......</label>
  <input type="text" name=".." id="...">

name或者id至少有一个是要和for里面一样

  

12.4 创建文本控件

可以用size 设置输入框的大小：

<input type="text" id="petname" size="15">

可以用maxlength设置最多可以输入的字符数：

<input type="text" id="petname" maxlength="15">

可以使用value在文本控件之前显示文本,用来提示需要用户输入怎样的文本

<input type="text" id="petname" maxlength="15" value="Enter a words">

但是这样的话文本字段将包含Enter a word，他将和用户输入的文本一起被提交，所以：

<input type="text" id="petname" maxlength="15" value="Enter a words" placeholder="Fido">

使用placeholder就可以防止这种情况出现

<input id="name" required>

这里使用了required，这个属性的作用是用户填写的信息必须和控件的要求匹配才可以被提交，这是一个布尔属性，不用加值

属性pattern

  

<input pattern="[0-9][a-z]{3}" name="part">

这样表示用户输入的文本必须只能是一个数字加上三个小写字母组成

12.4.2 使用datalist给文本字段添加可供选择的值

<datalist id="part1">
        <option value="apple">
        <option value="banana">
        <option value="pear">
    </datalist>
    <label>
        What is your favorite fruit?
        <input id="na" list="part1">
    </label>

这是效果图