HTML13：表单元素

input 标签

文本框 text

• maxlength：表示输入内容的最大长度
• size：可以设置文本框的初始宽度
• value：可以设置文本框的默认值

<input type="text" name="username" maxlength="8" size="30" value="小赵"/>

 

单选框 radio

• value：单选框的值
• name：表示分组，其中必须是同一组的单选框才能实现单选
• checked：该属性可以设置默认被选中

<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女

 

多选框 checkbox

• value：多选框的值
• name：表示分组，根据代码规范，同一组多选最好设置同样的name
• checked：该属性可以设置默认被选中

<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="code" name="hobby"/>敲代码
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戏

 

按钮 button

• value：按钮上的文字

<input type="button" name="btn1" value="点击我"/>

 

图片按钮 image

• src：显示的图片路径

<input type="image" src="../resources/img/1.png"/>

提交按钮 submit

• 点击后表单内的内容会被提交，默认按钮的文字是“提交”

<input type="submit"/>

重置按钮 reset

• 点击后表单内的内容会被清空，默认按钮的文字是“重置”

<input type="reset"/>

文件域 file

• 点击选择文件按钮，会打开文件管理器，选择需要上传的文件。选中后会显示选择的文件名

<input type="file" name="files"/>

 

 

邮箱验证 email

• 在提交时会进行邮箱格式验证；如果输入的值不是正确的邮箱格式，那么在提交时会有提示消息

<input type="email"/>

 

网址验证 url

• 在提交时会进行网址格式验证；如果输入的值不是正确的网址格式，那么在提交时会有提示消息

<input type="url"/>

 

数字验证 number

• max：最大值
• min：最小值
• step：步长，即每次增减的数量

<input type="number" max="100" min="10" step="10"/>

 

 

滑块 range

• max：最大值
• min：最小值
• step：步长，即每次增减的数量

<input type="range" name="voice" max="100" min="0" step="2"/>

 

select 标签

下拉框

• name：列表的名称
• value：选项的值
• selected：默认选中第一个值，可以通过这个属性修改默认选中的值

<select name="列表名称">
    <option value="china">中国</option>
    <option value="usa">美国</option>
    <option value="eth" selected>瑞士</option>
    <option value="yindu">印度</option>
</select>

 

textarea 标签

文本域

• cols：定义文本域列数
• rows ：定义文本域行数

<textarea name="textarea" cols="50" rows="8">文本内容</textarea>