HTML form tags HTML frame tags

(1) <form>...</form>Form label

Common attributes of the form tag:
*action attribute: the target address of the submission (URL)
*method attribute: submission method: get (default) and post
get methods are visible in the URL address bar, and the length is limited (IE2k Fire Fox 8k), relatively unsafe.
The post method is that the URL address is invisible, the length is not limited, and it is relatively safe.
enctype: submit type
target: where to open the target URL.
The name: attribute gives a name to the form. Use id instead in HTML5.

(2) <input>The form item label input defines the input field in which the user can enter data. In HTML 5, the type attribute has
many new values.

 具体在下⾯有详解:
 如:<input type="text" name="username">
 *type属性:表示表单项的类型:值如下:
 text:单⾏⽂本框
 password:密码输⼊框
 checkbox:多选框 注意要提供value值
 radio:单选框 注意要提供value值
 file:⽂件上传选择框
 button:普通按钮
 submit:提交按钮
 image:图⽚提交按钮
 reset:重置按钮, 还原到开始(第⼀次打开时)的效果
 hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改
 email ⽤于应该包含 e-mail 地址的输⼊域
 url ⽤于应该包含 URL 地址的输⼊域
 number ⽤于应该包含数值的输⼊域。
 max 规定允许的最⼤值
 min 规定允许的最⼩值
 step 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
 value 规定默认值
 range ⽤于应该包含⼀定范围内数字值的输⼊域,显示为滑动条
 max 规定允许的最⼤值
 min 规定允许的最⼩值
 step 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
 value 规定默认值
 ⽇期选择器 Date pickers
 date - 选取⽇、⽉、年
 month - 选取⽉、年
(3) <select>...</select> 标签创建下拉列表。
(4) <textarea>...</textarea> 多⾏的⽂本输⼊区域
(5) <button>...</button> 标签定义按钮。
 week - 选取周和年
 time - 选取时间(⼩时和分钟)
 datetime - 选取时间、⽇、⽉、年(UTC 时间)
 datetime-local - 选取时间、⽇、⽉、年(本地时间)
 search ⽤于搜索域,⽐如站点搜索或 Google 搜索
 color 颜⾊选择
 *name属性: 表单项名,⽤于存储内容值的
 *value属性: 输⼊的值(默认指定值)
 *placeholder: 预期值的简短的提示信息
 size属性: 输⼊框的宽度值
 maxlength属性: 输⼊框的输⼊内容的最⼤⻓度
 readonly属性: 对输⼊框只读属性
 *disabled属性: 禁⽤属性
 *checked属性: 对选择框指定默认选项
 accesskey属性: 指定快捷键(不常⽤) (IE:alt+键 ⽕狐:alt+shift+键)
 tabindex属性: 通过数字指定tab键的切换顺序(不常⽤)

 src和alt是为图⽚按钮设置的

 注意:reset重置按钮是将表单数据恢复到第⼀次打开时的状态,并不是清空
 image图⽚按钮,默认具有提交表单功能。

(3) <select>...</select>The label creates a drop-down list.

 `name`属性:定义名称,⽤于存储下拉值的
 `size`:定义菜单中可⻅项⽬的数⽬,html5不⽀持
 `disabled` 当该属性为 `true` 时,会禁⽤该菜单。
 `multiple` 多选
 `<option>... </option>` 下拉选择项标签,⽤于嵌⼊到`<select>`标签中使⽤的;
 `*value`属性:下拉项的值
 `*selected`属性:默认下拉指定项. 

(4) <textarea>...</textarea>Multi-line text input area

  name :定义名称,⽤于存储⽂本区域中的值。
 cols :规定⽂本区内可⻅的列数。
 rows :规定⽂本区内可⻅的⾏数。
 disabled: 是否禁⽤
 readonly: 只读
 ...
 默认值是在两个标签之间

(5) <button>...</button>The label defines the button.

您可以在 button 元素中放置内容,⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之
处。

(6) <fieldset> --fieldsetElements can group related elements within a form.

 disabled属性:定义 fieldset 是否可⻅。
 form属性: 定义该 fieldset 所属的⼀个或多个表单。

(7) <legend></legend>- The tag defines the title for the <fieldset>, <figure>and <details>elements .

<form>
 <fieldset>
 <legend>个⼈信息:</legend>
 姓名:<input type="text" /><br/>
 年龄:<input type="text" /><br/>
 </fieldset>
 <br/><br/>
 <fieldset>
 <legend>健康信息:</legend>
 身⾼:<input type="text" /><br/>
 体重:<input type="text" /><br/>
 </fieldset>
</form>

(8) <optgroup>html5 tags -- <optgroup>Tags define option groups. This element allows you to combine options

城市:
<select name="city">
 <optgroup label="河北省">
 <option>⽯家庄</option>
 <option>保定</option>
 <option>廊坊</option>
 </optgroup>
 <optgroup label="河南省">
 <option>郑州</option>
 <option>安阳</option>
 <option>周⼝</option>
 </optgroup>
</select>

(9) <datalist>html5 tags -- <datalist>The tags define a list of optional data. Used in conjunction with the input element, you can
make a drop-down list of input values.

<form action="demo_form.php" method="get">
 搜索:
 <input type="search" list="namelist" name="keywords"/>
 <datalist id="namelist">
 <option value="zhangsan">
 <option value="zhangsanfeng">
 <option value="zhangwuji">
 <option value="lisi">
 <option value="lixiaolong">
 </datalist>
</form>

HTML frame tag

属性:src:规定在 iframe 中显示的⽂档的 URL
 name:规定 iframe 的名称
 height:规定 iframe 的⾼度。
 width:定义 iframe 的宽度。
 frameborder:规定是否显示框架周围的边框。
例如:<iframe src="1.html" name="myframe" width="700" height="500"></iframe>

insert image description here
insert image description here

New input propertyinsert image description here

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324139690&siteId=291194637