HTML自用学习笔记（二）

表单和输入标签

1. <form></form> 定义供用户输入的 HTML 表单，块级元素 属性：

• accept-charset="UTF-8 - Unicode" 规定服务器可处理的表单数据字符集
• action="URL" 提交表单时向url地址发送表单数据
• autocomplete="on/(off)" 规定是否启用表单的自动完成功能
• method = "get/(post)" 发送 form-data 的 HTTP 方法。
• name = "" 规定表单名称

<form action="url" method="get" accept-charset="UTF-8 - Unicode" name="form_name">/form>

2.<input></input>

重要属性：

type

 <p><input type="text">文本框</input></p>
 <p><input type="number" min="0" max="10" value="2">数字框</input></p>
 <p><input type="password">密码框</input></p>
 <p><input type="email">邮箱框</input></p>
 <p><input type="search">搜索框</input></p>
 <p><input type="tel">电话框</input></p>
 <p><input type="button" value="按钮"></input>
 <p><input type="reset"></input></p>
 <p><input type="submit"></input></p>
 <p><input type="image" src="">图片形式按钮</input></p>
 <p><input type="radio">单选框</input></p>
 <p><input type="checkbox">复选框</input></p>
 <p><input type="date"></input></p>
 <p><input type="month"></input></p>
 <p><input type="datetime-local"></input></p>
 <p><input type="time"></input></p>
 <p><input type="week"></input></p>
 <p><input type="color">颜色选择</input></p>
 <p><input type="file">上传文件</input></p>
 <p><input type="range" min="0" max="10" value="2">滑块</input></p>

其他属性:

• accept 规定提交文件的类型(只能gif)

   <p><input type="file" accept="image/gif">上传文件</input></p>

• autocomplete="on/(off)" 规定是否启用表单的自动完成功能

   <p><input type="text" autocomplete="on">文本框</input></p>

• autofocus="autofocus" input自动获得焦点

   <p><input type="text" autofocus="autofocus">文本框</input></p>

• type="checkbox/radio" checked="checked" 复选框,元素首次加载时应当被选中

   <p><input type="radio"  checked="checked">复选框</input></p>
   <p><input type="checkbox"  checked="checked">复选框</input></p>

• disabled="disabled" 禁用

   <p><input type="email" disabled="disabled">邮箱框</input></p>

• form 表单<form></form>之外的输入字段,仍为表单的一部分
• formaction 两个提交按钮不同action时，给其中一个按钮使用
• formenctype 两个提交按钮不同编码方式时，给其中一个按钮使用
• formmethod 两个提交按钮不同提交方式时，给其中一个按钮使用
• formnovalidate(不验证) 两个提交按钮不同验证方式时，给其中一个按钮使用
• multiple="multiple" 允许上传一个以上

   <p><input type="file" multiple="multiple">上传文件</input></p>

• pattern 属性规定用于验证输入字段的模式（正则表达式）

   <p><input type="text" pattern="[A-z]{3}">文本框</input></p>

• placeholder="" 默认值

  <p><input type="text" pattern="[A-z]{3}" placeholder="三个字母">文本框</input></p>

• readonly 只读不可改
• size="35" 输入35个字符

3. <textarea> 多行的文本输入 属性：

• autofocus 自动获得焦点
• cols 文本区内的可见宽度
• rows 文本区内的可见高度
• disabled 禁用
• maxlength 文本区域的最大字符数
• placeholder="" 默认值
• required 规定必填
• wrap="hard/soft" 文本会包含换行符/文本不换行

4. <button></button> 按钮 属性： - autofocus 自动获得焦点 - disabled 禁用

5. <select></select> 下拉选择

6. <optgroup></optgroup> 下拉选项分组

7. <option></option> 下拉选项 属性：
   - autofocus 自动获得焦点 - disabled 禁用 - required 规定必填

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

6. <label></label> 标签为 input 元素定义标注
7. <fieldset></fieldset> 表单边框
8. <legend></legend> 元素标题
9. <datalist></datalist> 定义下拉列表

   <fieldset>
        <legend>选择</legend>
        <label>选择列表</label>
        <input list="browsers">
        <datalist id="browsers">
            <option value="1">Volvo</option>
            <option value="2">Saab</option>
        </datalist>
    </fieldset>

框架标签

1. <iframe></iframe> 定义内联框架 属性：

• framebor="1/0" 规定是否显示框架周围的边框
• marginheight 定义 iframe 的顶部和底部的边距。
• marginwidth 定义 iframe 的左侧和右侧的边距。