html5 input表单属性值表单input标签有哪些属性

转载

数据小香 2023-07-19 20:47:18

文章标签 html5 input表单属性值文本框取值单选框 文章分类 HTML5 移动开发

一：什么是 input 标签

input，翻译过来就是 “输入” 的意思，在 HTML 中，大多数表单都是使用 input 标签来实现的。

说明：input 是自闭合标签，可以看到它是没有结束符号的。

二：input 标签中 type 属性取值

text单行文本框password密码文本框radio单选框checkbox多选框button、submit、reset按钮file文件上传

text 单行文本框

单行文本框使用 input 标签来实现，type 属性的取值是 text ，比如常用于登陆注册功能。

<div>
        姓名：<input type="text" />
    </div>

单行文本框常用属性

属性	解释说明
value	设置默认情况下文本框显示的文字(默认值)
size	设置文本框的长度
maxlength	设置文本框中最多可以输入的字符数

① value 属性默认情况下，单行文本框的输入区域是空白的，如果想给该区域设置默认的显示文字，就要用到 value 属性

② size 属性单行文本框的默认长度是 20 像素，如果想改变其默认长度，就要用到 size 属性，代码如下所示

③ maxlength 属性我们注册一个账号，在输入用户昵称时，经常会提示最多输入多少个字，在单行文本框中，想要实现这个功能，就要使用 maxlength 属性。

password 密码文本框

密码文本框，从名字就可以看出来这是一个输入密码的文本框，type 取值为 password 。

密码：<input type="password" />

从外观上来看，密码文本框和单行文本框相似，你也可以把密码文本框看成是一种特殊的单行文本框。但当我们在输入框内输入字符后，我们就可以看到两者的区别。

在单行文本框中输入的字符可见，而在密码文本框中输入的字符是不可见的。这是两者本质上的区别。

密码文本框和单行文本框拥有相同的属性（value、size、maxlength），作用也是一致的，这里不再重复说明。

但需要特殊说明的是，密码文本框内的字符被黑色小圆点代替，这也只是让你旁边的人看不到你输入了什么，对数据的安全性来说是没一点作用的，浏览器和服务器之间数据的安全传输，属于后端技术。

radio 单选框

单选框使用 input 标签来实现，type 属性取值为 radio 。

这里的要用到属性 name 和 value

属性	解释说明
name	单选按钮所在的组名
value	单选按钮的取值

value 属性的取值一般跟后面的文本相同，虽然加不加 value 属性在显示效果上都是一样的，但之所以要加上，也是为了方便 JavaScript 或者是服务器来对数据进行操作，关于这点，所有表单元素的 value 属性的作用都是一致的。

<form>
        性别
        <input type="radio" name="sex" value="男" />男
        <input type="radio" name="sex" value="女" />女
    </form>

使用单选框的两个注意事项

注意事项一：不能忘记加 name 属性。
注意事项二：同一组的单选框，必须设置相同的 name。

这两个注意事项，犯了其中一项，都会导致单选框出现可以同时被选取的情况

checkbox 复选框

复选框使用 input 标签实现，type 属性的取值为 checkbox ，从名字可以很清楚的知道，复选框可以选择多项。

复选框的属性 name 和 value,和单选框其实是一样的，这两个属性也是必填项。

<form>
        你最喜欢的运动 <br />
        <input type="checkbox" name="anime" value="游泳" />游泳
        <input type="checkbox" name="anime" value="足球" />足球
        <input type="checkbox" name="anime" value="篮球" />篮球
        <input type="checkbox" name="anime" value="乒乓球" />乒乓球
    </form>

多选框默认不会选中任何选项，如果想在默认情况下，选中一个或者多个选项，也需要用到 checked 属性来实现，代码如下所示

<form>
        你最喜欢的运动 <br />
        <input type="checkbox" name="anime" value="游泳" checked />游泳
        <input type="checkbox" name="anime" value="足球" checked/>足球
        <input type="checkbox" name="anime" value="篮球"  checked/>篮球
        <input type="checkbox" name="anime" value="乒乓球"  checked/>乒乓球
    </form>