HTML笔记-表单

JessieLi
58 阅读4分钟

Web表单主要用来和用户进行交互。

  1. 允许用户输入数据，通过表单将数据发送到 web 服务器进行处理和存储
  2. 允许用户输入数据，在客户端使用某种方式立刻更新界面
  3. 构成： 一个或多个表单控件 + 表单附加元素

表单控件

form 元素

form 元素用来定义表单。一般设置 action & get 属性。

  • action 属性：提交表单时，把所收集的数据送给URL去处理
  • method 属性：发送数据的HTTP方法
 <form action="http://www.baidu.com" method="get">
 </form>

label 元素

label 元素表示用户界面中某个元素的说明。

  • for 属性：关联相关元素的 id 属性
  • 扩大点击范围，点击 label 元素可以响应事件
 <label for="name">Name:</label>
<input type="text" id="name" name="user_name">

input 元素

Input 元素用于为表单创建交互式控件, 以便接受来自用户的数据。

  • type 属性：决定 input 元素的工作方式
  • name 属性： 控件的名称，与表单数据一起提交
  • accept 属性：当 type 属性的值是 file，表明了服务器端可接受的文件类型
  • value 属性 ：input元素的 默认值
  • placeholder 属性： 占位符文字
   <label for="name">Name:</label>
   <input type="text" id="name" placeholder="请填写姓名">

type属性取值

  • text: 默认值， 单行的文本区域
  • password:单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。
  • number: 用于输入数字的控件
  • email: 编辑邮箱地址的区域
  • radio: 单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个
  • checkbox: 复选框，相同 name 值可设为选中或未选中
  • date: 输入日期的控件（年、月、日，不包括时间）
  • file: 选择文件， 使用 accept 属性规定控件能选择的文件类型
  • color: 用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器
  • image: 带图像的 submit 按钮, 显示的图像由 src 属性规定
  • button: 没有默认行为的按钮，上面显示 value 属性的值，默认为空。
  • reset: 此按钮将表单的所有内容重置为默认值。不推荐
  • submit: 用于提交表单的按钮
  • hidden：用户不可见，但发送表单的时候数据会被发送到服务器

textarea 元素

表示一个多行纯文本编辑控件。默认内容是位于开始标签和闭合标签之间的内容。

  • name 属性：随表单一同提交到服务器的相关数据的名字
  • wrap 属性: 指定如何控制文本换行
  • rows 和 cols 属性: rows属性 输入文本的行数, cols属性 文本域的可视宽度
  • resize 属性： 控制文本域可缩放性
  • 默认情况：inline-blcok元素，文本底线对齐
  • 基线不一致: 对于不同的浏览器textarea的基线不一致
  • 样式中使用有效值和无效值 :valid 和 :invalid
    <form action="https://www.baidu.com">
        <label for="feedback">反馈内容：</label>
        <textarea name="feedback" 
                  id="feedback" 
                  cols="30" 
                  rows="10" 
                  placeholder="请输入反馈内容" 
                  minlength="10" 
                  maxlength="20">111</textarea>
        <button type="submit" onclick="">提交数据!</button>
    </form>

button 元素

Button元素表示一个可点击的按钮

  • type 属性： 确定按钮元素的工作方式
    • submit: 此按钮将表单数据提交给服务器
    • reset: 此按钮重置所有组件为初始值
    • button: 此按钮没有默认行为
  • name 属性 ：button 的名称，与表单数据一起提交
   <button type="submit" onclick="">提交数据!</button>

fieldset 元素

用于对表单中的控制元素进行分组（也包括 label 元素）

  • 内置了一个 legend 元素作为 fieldset 的标题
<form action="https://www.baidu.com">
        <fieldset>
            <legend>Simple fieldset</legend>
            <input type="radio" id="radio">
            <label for="radio">Spirit of radio</label>
        </fieldset>
 </form>

select 下拉控件

  • 选择框 由 select 元素及一个或多个 option（选择框的取值）构成的
  • option 元素可设置 selected 属性预先选中
  • option元素可以嵌套在 optiongroup 元素中
  • value 属性：当表单提交时提交value的值, 不设置元素的内容会作为提交的值
  • 向添加 select 元素multiple 属性，允许多选
    <form action="https://www.baidu.com">
        <fieldset>
            <legend>select fieldset</legend>
            <select name="groups" id="groups" multiple="2">
                <optgroup label="fruit">
                    <option value="banana">Big, beautiful yellow banana</option>
                    <option value="cherry">Succulent, juicy cherry</option>
                    <option value="lemon">Sharp, powerful lemon</option>
                </optgroup>
                <optgroup label="vegetables">
                    <option>Carrot</option>
                    <option>Eggplant</option>
                    <option>Potato</option>
                </optgroup>
            </select>
            <button type="submit">提交数据!</button>
        </fieldset>
 </form>

datalist 元素

datalist 元素中 option 子元素为表单项提供推荐的自动补全值, 需要指定一个 id

    <form action="https://www.baidu.com">
        <fieldset>
            <legend>favorite fruit</legend>
            <label for="myFruit">What's your favorite fruit?</label>
            <input type="text" id="myFruit" name="myFruit" list="mySuggestion">
            <datalist id="mySuggestion">
                <option>Apple</option>
                <option>Banana</option>
              </datalist>
        </fieldset>
    </form>

output 元素

output 表示计算或用户操作的结果

<label for="myFruit">What's your favorite fruit?</label>
<input type="text" id="myFruit" name="myFruit" list="mySuggestion">
<datalist id="mySuggestion">
    <option>Apple</option>
    <option>Banana</option>
</datalist>

文本框规范

通用规范：

  1. 可以被标记为 readonly 或者 disabled
  2. 可以有一个 placeholder 来简略描述输入框的目的占位符
  3. 以使用 size 和 maxlength 进行限制
  4. 如果浏览器支持的话，可以进行拼写检查

复选框

  1. 任何带有 checked 属性的复选框和单选按钮在加载时都会匹配 :default伪类
  2. 任何当前被选中的元素，都会匹配 :checked 伪类
avatar
文章
阅读
粉丝