zoukankan      html  css  js  c++  java
  • HTML——表单&输入

    1.关于表单

    表单是一个包含表单元素的区域。<form></form>

    表单元素是允许用户在表单中(比如文本域、下拉列表、单选框、复选框)输入信息的元素。

    2.输入

    input——

    type可选值:text(文本域)、radio(单选框)、checkbox(复选框)、password(密码暗文输入)、reset(重置文本框)

    name:用于后台程序使用

    value:默认值

    <form>
    First name: 
    <input type="text" name="firstname" />
    <br />
    Last name: 
    <input type="text" name="lastname" />
    </form>
    

    3.表单的动作属性和确认按钮

    点击确认后,表单的内容会被传送到另一个文件,action定义了目的文件的文件名

    <form name="input" action="html_form_action.asp" method="get">
    Username: 
    <input type="text" name="user" />
    <input type="submit" value="Submit" />
    </form>
    

    4.下拉列表

    selected:默认选中

    multiple="multiple" 表示可多选

    <form>
    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected="selected">Fiat</option>
    <option value="audi">Audi</option>
    </select>
    </form>

    5.多行文本域

    <textarea rows="10" cols="50">在这里输入内容...</textarea>

    6.创建按钮

    <form>
    <input type="button" value="Hello world!">
    </form>
    

    7.带标题的框

    <form>
      <fieldset>
        <legend>健康信息</legend>
        身高:<input type="text" />
        体重:<input type="text" />
      </fieldset>
    </form>
    

    8.form中的label标签

    label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。

    如果你在 label 标签内点击文本,就会触发此控件。

    就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

    注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

    <label for="控件id名称"></label>

    9.表单标签

    标签描述
    <form> 定义供用户输入的表单
    <input> 定义输入域
    <textarea> 定义文本域 (一个多行的输入控件)
    <label> 定义一个控制的标签
    <fieldset> 定义域
    <legend> 定义域的标题
    <select> 定义一个选择列表
    <optgroup> 定义选项组
    <option> 定义下拉列表中的选项
    <button> 定义一个按钮
    <isindex> 已废弃。由 <input> 代替。
  • 相关阅读:
    kickstart自动化安装
    linux双网卡绑定
    作死实验,删除libc.so.6
    安装centos6及安装redhat6后的配置
    交换机、linux光衰查询
    ansible的简单使用
    linux安全配置学习
    vm的三种网络模式
    Recylerview的使用系列教程
    Android自定义组合控件
  • 原文地址:https://www.cnblogs.com/congyue-pepsi/p/5664759.html
Copyright © 2011-2022 走看看