博客列表 >表单元素:输入框下拉列表+按钮+文本域+表单域分组属性

表单元素:输入框下拉列表+按钮+文本域+表单域分组属性

神一样的男子
神一样的男子原创
2020年04月05日 18:38:031323浏览

表单元素

  • 表单<form>标签外创建表单元素:关键:元素添加属性 form="id", 绑定表单 id,可以放置到<body>任意地方

输入框下拉列表:

  1. <input type="text" name="course" list="courses" />
  2. <datalist id="courses">
  3. <option value="html"></option>
  4. <option value="java"></option>
  5. <option value="c++"></option>
  6. <option value="javaScript"></option>
  7. <option value="php"></option>
  8. </datalist>
  • 属性:<list> 需要关联 datalist 标签 id

按钮:<button>

  • 默认 type=”submit”,相当于 <input type="submit">
  • 属性:
    • formmethod=POST/GET:提交 http 方法
    • formaction="x.php":提交到那个接口
    • formtarget="_blank":当前页面提交

下拉列表:<select>

  • 属性:
    • size : 控制下拉列表控件的可见 item 个数
    • multiple : 多选,使用 ctrl、shift 键控制
  • <optgroup> + <option> 标签嵌套使用可达到数据分组的效果;
  • <option>标签中添加lable可省略选项文本,便于使用 css;
  • 事件:
    • onchange:值改变就有回调;
    • onclick:鼠标点击就有回调;
  • this.value : 代表当前标签选中的值;

文本域:<textarea>

  • 属性:
    • colsrows:定义可见内容的列数、行数;间接定义了元素的宽度,在style中设置了width失效。
    • minlengthmaxlength:最小(提交时验证)、最大(输入时限制)输入内容长度
  • 事件:
    • onselect:选中文字事件:如改变文本内容颜色
    • onchange

表单域分组:<fieldset>

  • 属性:
    • legend:头部文本信息
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议