Community Learn Tools Library Leisure

English

Home > List of blog posts > 表单元素：输入框下拉列表+按钮+文本域+表单域分组属性

Blogger Information

Blog 6

fans 0

comment 0

visits 4832

Special Recommendation

More>

Related recommendations

表单元素

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

输入框下拉列表：

<input type="text" name="course" list="courses" />
<datalist id="courses">
  <option value="html"></option>
  <option value="java"></option>
  <option value="c++"></option>
  <option value="javaScript"></option>
  <option value="php"></option>
</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>`

属性：
- cols、rows:定义可见内容的列数、行数；间接定义了元素的宽度，在style中设置了width失效。
- minlength、maxlength：最小（提交时验证）、最大（输入时限制）输入内容长度
事件：
- onselect：选中文字事件：如改变文本内容颜色
- onchange：

表单域分组:`<fieldset>`

属性：
- legend:头部文本信息

Correcting teacher：

天蓬老师

Correction status：unqualified

Teacher's comments：作业总结呢?

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

Day2 作业

2020-04-04 14:46:32

表单元素

输入框下拉列表：

按钮：<button>

下拉列表：<select>

文本域：<textarea>

表单域分组:<fieldset>

按钮：`<button>`

下拉列表：`<select>`

文本域：`<textarea>`

表单域分组:`<fieldset>`