多行文本域

1
2
3
<form>
备注信息:<textarea name="remark" cols="30" rows="10"></textarea>
</form>

效果如下:

备注信息:

拖动右下角可以随意改变文本域大小,如果要取消这一特性,要使用CSS清除这一特性 textarea{ resize:none; } 限制字符输入长度则需要使用JS脚本等方法

readonly和disabled属性

readonly属性

  • 在某些情况下,input表单控件并不用于用户输入数据,而是将已有的数据显示给用户查看,而且显示的这些数据,用户不能删除,也不能修改,即这些数据是只读的。
1
2
3
4
<form>
<input type="text" name="input1" value="中国" readonly="true"><br><br>
<input type="text" name="input2" value="中国" readonly>
</form>

效果如下:



disabled属性

  • 在某些情况下,某些表单元素不可用,比如在用户提交表单到后台,后台正在处理表单的过程中,不允许用户再次提交表单,这时应将提交按钮设置为不可用。
1
2
3
4
5
6
<form>
<input type="text" name="input3" value="china" disabled="true"><br><br>
<input type="text" name="input4" value="china" disabled><br><br>
<input type="submit" value="提交按钮1">
<input type="submit" value="提交按钮2" disabled>
</form>

效果如下:





表单新增属性

form属性

  • 使用form属性可以定义表单元素和某个表单之间的隶属关系。form属性需赋予id值。
1
2
3
4
<form id="form1">
...
</form>
<input type="text" id="form1">

formaction属性

  • 当一个表单中包含两个或两个以上的提交按钮,可使用formaction属性来指定处理逻辑。
1
<input type="text" formaction="处理逻辑">

autofocus属性

  • HTML5表单的<textarea>和所有<input>元素都有autofocus属性,其值是一个布尔值,默认值是false。一旦为某个元素设置该属性,页面加载完成后该元素将自动获得焦点。

    需要注意的是:

    一个页面中最多只能有一个表单元素设置该属性,否则该功能将失效

1
2
<input type="text" autofocus>
<textarea cols="30" rows="10" autofocus></textarea>

pattern属性

  • pattern属性是input元素的验证属性,该属性的值是一个正则表达式,通过这个表达式可以验证输入内容的有效性。
1
2
3
4
5
6
<form>
用户名:<input type="text" name="username" pattern="^[a-zA-Z\w{2,7}" title="必须以字母开头,包含字符或数字,长度是3~8"><br><br>
密码:<input type="password" name="password" pattern="\d{6}" title="必须输入6个数字"><br><br>
<input type="submit" value="注册">
<input type="reset" value="取消">
</form>

效果如下:

placeholder属性

  • placeholder属性主要用于在文本框或文本域中提供输入提示信息,以增加用户界面的友好性。当表单元素获得焦点时,显示在文本框或文本域中的提示信息将自动消失。
1
2
3
4
5
6
<form action="" method="POST">
姓名:<input type="text" placeholder="请输入您的真实姓名" name="username"><br>
电话:<input type="text" placeholder="请输入您的手机号码" name="tel"><br>
备注:<textarea placeholder="输入内容不能超过150个字符" cols="30" rows="10"></textarea><br>
<input type="submit" value="提交">
</form>

效果如下:

姓名:
电话:
备注:

required属性

  • 判断元素的值是否为空或字符长度是否等于0。
1
<input type="text" required>

元素轮廓(outline)

  • 修改轮廓的默认样式需要使用CSS的outline属性

    属性 属性值
    outline 在一个声明中同时设置各个属性,
    各属性之间空一格:outline-color outline-style outline-width
    outline-color 取值与border-color类似
    outline-style 取值与border-style类似
    outline-width 取值与border-width类似
1
2
3
input:focus{
outline: red dotted thin;
}

表单元素的默认样式及重置

  • 元素 样式重置
    form form{
    margin:0;
    }
    input表单控件 input[type=text]{
    border:none或其他值;
    padding:0或某个px;
    outline:none;
    }
    input[type=radio]{
    outline:none;
    margin:0或某个px;
    }
    input[type=checkbox]{
    outline:none;
    margin:0或某个px;
    }
    textarea textarea{
    margin:0;
    padding:某个px;
    outline:none;
    resize:none;
    overflow:auto;
    }
    select select{
    padding:0;
    }
    option option{
    left-padding:某个px;
    right-padding:某个px;
    }

表单美化

  • 与普通元素一样通过CSS控制美化,此处略过N个字。

表单的元素类型

  • form是块级元素

    display属性值为block

  • input,select,textarea和button元素是行内块元素

    display属性值为inline-block