input 设置readonly 提交一次表单后不能提交第二次_HTML表单元素及其属性

爱河难浴

于 2021-02-04 08:11:05 发布

阅读量448

点赞数

文章标签： input 设置readonly 提交一次表单后不能提交第二次

本文链接：https://blog.csdn.net/weixin_32824625/article/details/113669042

版权

表单区域元素

表单区域使用<form>标签包裹，表单区域中可添加多种表单元素，包括input元素、textarea元素、select元素、button元素和label元素等，需要注意<input>为单标签元素。

<form>
    <input>
    <textarea></textarea>
    <select></select>
    <button></button>
    <label></label>
</form>

表单区域元素常用属性：

action：处理器表单提交的URL，规定提交表单向何处发送表单数据。
method：浏览器使用这种HTTP方式来提交表单，可能的值有post和get。post指HTTP POST方法，表单数据会包含在表单体内然后发送给服务器。get指HTTP GET方法，表单数据会附加在action属性的URL中，并以'?'作为分隔符。
target：规定提交表单后在何处打开action URL。可能的值包括：_self(默认值)、_blank、_parent、_top。

<form action="form_action.asp" method="get" target="_blank">

输入元素

输入元素使用<input>标签包裹，输入元素通过type属性区分不同的输入元素类型，包括text文本输入框、password密码输入框、search搜索框、number数字输入框、radio单选按钮、checkbox复选框、hidden隐藏域(页面不可见、用于保存数据等)、file上传文件、button普通按钮、submit提交按钮、reset重置按钮等。

<form>
    <input type="text">
    <input type="password">
    <input type="search">
    <input type="number">
    <input type="radio">
    <input type="checkbox">
    <input type="hidden">
    <input type="file">
    <input type="button">
    <input type="submit">
    <input type="reset">
</form>

输入元素通用属性除type外还有：

name：input表单元素的名字。以名字/值的形式随表单一起提交。
value：表单控件的值。以名字/值对的形式随表单一起提交。
disabled：该属性为布尔属性，只有属性名，用于表示表单元素是否被禁用。
autocomplete：用于表单元素的自动填充功能。
autofocus：当页面加载时自动聚焦到有此属性的表单元素。

另外部分元素包括如下属性：

placehold：当表单元素为空时，元素中显示的内容。
readonly：布尔属性，存在时表示控件的值不可编辑。
required：布尔属性，表示此值为必填项或者提交表单前必须先检查该值

<form>
    <input type="text" name="name" autofocus>
</form>

多行纯文本编辑元素

多行纯文本编辑元素使用<textarea>标签包裹。

<form>
    <textarea></textarea>
</form>

多行纯文本编辑元素的属性包括:

name：用于设置随表单一同提交到服务器的相关数据的名字
rows和cols：用于声明<textarea>的精确尺寸。

另外还包括与<input>功能相同的属性包括：disabled、autocomplete、autofocus、placehold、readonly、required等。

<form>
    <textarea name="name" rows="4" cols="10"></textarea>
</form>

选项列表

选项列表使用<select>标签包裹，可用于创建单选或者多选菜单，其中菜单项使用<option>标签包裹。

<form>
    <select>
        <option></option>
    </select>
</form>

选项列表元素的属性包括：

multiple：布尔属性，表示列表中的选项是否支持多选。如没有声明该值时一次只能选中一个选项。
size：如果控件显示为滚动列表框，则此属性表示为控件中同时可见的行数。

其他属性包括：disabled、autocomplete、autofocus、required等。

菜单项的熟悉包括：

selected：布尔属性，表明这个菜单项是否一开始就被选中。
value：这个属性的值表示该选项被选中时提交给表单的值。如果省略此属性，提交值就从选项元素扽文本内容中获取。
label：这个属性用于表示选项含义的文本，如果label属性没有定义，它的值就是元素文本内容。
disabled：布尔属性，同样用于表示该选项不可选。

<form>
    <select multiple>
        <option selected value= "value1">content1</option>
        <option disabled label="label1">content2</option>
    </select>
</form>

标签元素

标签元素使用<label>标签包裹，用来关联表单元素。当点击标签时与之关联的表单元素自动获得焦点。标签元素的使用方式有两种：可以直接包裹表单元素，也可以使用for属性关联到表单元素的id属性。

<label>input: <input type="text"></label>
<label for="idName">input:</label><input type="text" id="idName">