html学习之表单元素

form表单

作用： 包含用户输入控件。并向后台传递用户的输入的数据。

 

1. form标签

display: block

属性	说明
action	表单要提交数据的地址
method	提交表单数据的http方法。有post和get两个值。get适合少量数据的时候使用，浏览器对url长度有限制
name	表单名称。通过name可以在脚本中引用表单
novalidate	提交表单的时候不进行校验。值为novalidate
rel	规定链接资源与当前资源的关系
target	规定在何处打开链接。值与<a>的target一样

在使用表单的默认提交方式时，如果要正确的提交，每一个输入元素必须要有name属性

 

 

2. input

作用：用户输入信息的控件，根据type属性的不同有很多种形式。

display: inline-block

属性	说明
type	控制输入控件的类型。具体值及使用请看下面的例子
alt	定义type=image时图像不显示时的替代文本
autocomplete	是否启用输入字段的自动完成功能。值为：on和off.默认启用，关闭之后聚焦输入框的时候不会有自动提示
autofocus	规定输入字段在页面加载的时候是否获取焦点。不适合type="hidden的元素
checked	规定单选框或者复选框在页面首次加载的时候是否被选中
disabled	是否禁用此元素
form	规定元素所属的一个或者多个表单
height/width	设置高/宽；像素值或者%
maxlength	最大长度
size	规定输入框的尺寸
max/min/required	规定输入字段的最大值/最小值/必填
name	名字。便于在脚本中引用它
value	input元素的值
readonly	只读，但是可以被选中和复制。readonly="readonly"。可与 <input type="text"> 或 <input type="password"> 配合使用
multiple	配合type= email/file使用。可以选中多个值
pattern	规定输入字段的模式。值为正则字符串。适用与type=text/password

<form action="#" method="post">
    <p> <span class="label">普通文本框：</span><input type="text" name="username" placeholder="text"></p>
  <p> <span class="label">定义密码字段：</span><input type="password" name="pas" placeholder="password"></p>
  <!-- 按钮的内容可否改变 -->
  <p> <span class="label">上传文件</span><input type="file" name="file" value="file"></p>
  <p> <span class="label">定义隐藏输入字段</span><input type="hidden" name="hidev" value="hiddenvalue"></p>
  
​
  <p><span class="label">单选按钮</span>
    <!-- 通过name属性给单选按钮分组：相同name的radio为一组
         value是该单选按钮绑定的值
     -->
    <input type="radio" name="sex" value="0"> 单选一 &nbsp;
    <input type="radio" name="sex" value="1"> 单选二 &nbsp;
  </p>
​
  <p><span class="label">复选框</span>
    <input type="checkbox" name="vehicle" value="Bike" /> I have a bike
    <input type="checkbox" name="vehicle" value="Car" /> I have a car
    <input type="checkbox" name="vehicle" value="Apple" /> I have a apple
  </p>
​
  <!-- 就是一个按钮，不会触发表单的提交事件 -->
  <p> <span class="label">可点击按钮：</span><input type="button" value="button"></p>
  <!-- 会重置表单里的所有内容 -->
  <p> <span class="label">重置按钮</span><input type="reset" value="reset"></p>
  也会触发表单的提交事件
  <p> <span class="label">定义图片形式的<strong>提交</strong>按钮</span><input width="30px" src="../images/297888.jpg" type="image" value="file"></p>
​
  <p><span class="label">提交按钮</span><input type="submit" value="submit"></p>
  </form>

 

初始化样式

input:focus {
  outline: none /*去掉高光*/
}

 

3. select

可以创建单选或者多选菜单

属性	说明
autofocus	页面加载完毕后，自动获取焦点
disabled	禁用
form	规定它属于一个或者多个表单
multiple	多选
name	名字
required	必填
size	规定下拉列表可见选项的数目

option 和 optgroup

属性	说明
value	option选项对应的值
label	规定更短版本的选项，下拉列表会显示更短版本。ie7+才支持，建议配合<optgroup>使用
selected	默认被选中
disabled	禁用选项

<select>
  <option value="1">一</option>
  <option disabled value="2">二</option>
  <option selected value="3">三</option>
  <option value="4">四</option>
</select>
​
<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>

 

 

4. label

display: inline

不会向用户呈现任何特殊效果，不过当鼠标点击其中的文本，相应的表单控件就会被聚焦（label的for属性必须与表单控件的id属性对应）。

<label for="num">数字:</label>
<input id="num">

 

5. fieldset和legend

<fieldset>标签将表单中相关的元素进行分组，浏览器会以特殊的样式把它们组合起来。<legend>标签给分组命名。两个都是块级元素。