【HTML+CSS】表单进阶

表单标签

表单控件

• 表单域form
  • action
  • method: get post
• 表单控件input
  • 文本输入框text
  • 密码框password
  • 提交按钮submit
  • 普通按钮button
  • 重置按钮reset
  • 单选框radio
    • 同一组单选框name值相同
  • 多选框checkbox
  • 文件上传框file
  • 隐藏表单控件hidden
    • 用js绑定数据, 和表单一起提交到后台
  • image图片域提交按钮
    • src图片地址
    • alt图片加载失败后的提示信息

<fieldset>
        <legend>
            这是表单控件
        </legend>
        <p>
            文本输入<input type="text">
        </p>
        <p>
            密码输入<input type="password">
        </p>
        <p>
            <input type="submit" value="提交按钮">
            <input type="reset" value="重置按钮">
            <input type="button" value="普通按钮">
        </p>
        <p>单选框
            <input type="radio">
            男<input type="radio" name="sex">
            女<input type="radio" name="sex">
        </p>
        <p>多选框
            <input type="checkbox">
            唱<input type="checkbox">
            跳<input type="checkbox">
            rap<input type="checkbox">
        </p>
        <p>
            文件框<input type="file">
        </p>
        <p>
            隐藏框<input type="hidden">
        </p>
        <p>
            图片域或提交按钮<input type="file">
        </p>
    </fieldset>

按钮button的类型type

type属性必须写, 不同李浏览器默认的type不一样

• button
• submit
• reset

<fieldset>
        <legend>
            按钮类型
        </legend>
        <p>
            <button type="button">普通按钮</button>
            <button type="submit">提交按钮</button>
            <button type="reset">重置按钮</button>
        </p>
    </fieldset>

非input控件

• select下拉框
  • option 下拉选项
• textarea多行文本域

<fieldset>
        <legend>非表单控件</legend>
        <select name="" id="">
            <option value="">请选择</option>
            <option value="">上海</option>
            <option value="">杭州</option>
            <option value="">江西</option>
        </select>
        <p>
            多行文本域
            <textarea name="" id="" cols="30" rows="10" placeholder="请留言..."></textarea>
        </p>
</fieldset>

表单标签属性

表单标签的html属性

• disabled
  • 表单的禁用状态
  • disabled="disabled"属性和属性值相同, 可以直接简写成disabled
• checked
  • 表单的默认选中状态
  • checked="checked"属性和属性值相同, 可以直接简写成checked
• selected
  • selected="selected"属性和属性值相同, 可以直接简写成selected
  • 下拉框option的默认选中状态

<form action="">
        <fieldset>
            <legend>input控件</legend>
            <p>单选框
                男:<input type="radio" name="sex">
                女:<input type="radio" name="sex" checked>
            </p>
            <p>多选框
                唱<input type="checkbox" disabled>
                跳<input type="checkbox">
                rap<input type="checkbox" checked>
            </p>
            <p>文件框
                <input type="file">
            </p>
            <select>
                <option value="">123</option>
                <option value="" selected="selected">456</option>
                <option value="">123</option>
                <option value="">123</option>
            </select>
        </fieldset>
    </form>

表单标签的CSS属性

• cursor鼠标指针类型cursor:pointer;
  • pointer抓手
• resize表单控件textarea是否可以拖拽
  • none静止拖拽
  • horizontal只能水平方向上拖拽
  • vertical只能垂直方向上拖拽
• outline去掉表单控件的外轮廓
  • none

iframe在网页中嵌套网页

<style>
        textarea{
            width: 200px;
            height: 300px;
            /* 只能水平方向拖动 */
            resize: horizontal;
            /* 只能垂直方向拖动 */
            resize: vertical;
            /* 静止拖动 */
            resize: none;
            /* 抓手 */
            cursor: pointer;
        }
        input{
            outline: none;
        }
 </style>
 <textarea placeholder="提意见" name="" id="" cols="30" rows="10"></textarea>
    <p>
        文本<input type="text">
    </p>
    <p>
        <iframe src="http://www.4399.com" frameborder="0">
        </iframe>
    </p>

cursor鼠标指针类型