湛江网站公司,望京网站开发,网站后台账号密码忘记了,网站开发设计技术前言
发现input的type属性还是有挺多的#xff0c;这里把一些常用的总结一下。
HTML 输入类型 (w3school.com.cn)https://www.w3school.com.cn/html/html_form_input_types.asp
text-文本
文本输入,如果文字太长#xff0c;超出的部分就不会显示。
定义供文本输入的单行…前言
发现input的type属性还是有挺多的这里把一些常用的总结一下。
HTML 输入类型 (w3school.com.cn)https://www.w3school.com.cn/html/html_form_input_types.asp
text-文本
文本输入,如果文字太长超出的部分就不会显示。
定义供文本输入的单行输入字段
姓名input typetext namename password-密码
密码会用实心的小圆点代替输入的字符。
定义密码字段
密码input typepassword namepassword radio- 收音机
单选按钮用checkedchecked默认选中“男”用label增大他的命中范围使得点击字符“男”或“女”可以达到选中单选按钮的效果同时通过name属性使得两个是一组两者同时只能有一个被选中。
定义单选按钮
性别labelinput typeradio namegender value1 checkedchecked男/labellabelinput typeradio namegender value2女/label checkbox- 复选框
和单选按钮不同的是可以同时选中几个同样使用label标签来增大命中的范围。
定义复选框
爱好labelinput typecheckbox namehobby valueppq乒乓球/labellabelinput typecheckbox namehobby valuelq篮球/labellabelinput typecheckbox namehobby valuezq足球/label file-文件夹
可以上传计算机上面的文件图片。
图像input typefile nameimage date- 日期
选择日期。
用于应该包含日期的输入字段
生日input typedate namebirthday time- 时间
选择时间。
允许用户选择时间无时区 时间input typetime nametime datetime-local-本地时间
选择日期和时间。
允许用于选择日期和时间无时区datetime是有时区
日期时间input typedatetime-local namedatetime email-电子邮件
文本输入要符合电子邮件地址的规范。
用于应该包含电子邮件地址的输入字段
邮箱input typeemail nameemailinput typesubmit value提交 number- 数字
只能输入数字字符且右边可以自增自减。
用于应该包含数字值的输入字段
年龄input typenumber nameage 属性描述disabled规定输入字段应该被禁用max规定输入字段的最大值maxlength规定输入字段的最大字符数min规定输入字段的最小值pattern规定通过其检查输入值的正则表达式readonly规定输入字段为只读无法修改required规定输入字段是必需的必需填写size规定输入字段的宽度以字符计step规定输入字段的合法数字间隔value规定输入字段的默认值
select- 选择
下拉列表通过selected默认选中。
学历select namedegreeoption value1初中/optionoption value2高中/optionoption value3大专/optionoption value4 selectedselected本科/optionoption value5硕士/optionoption value6博士/option/select textarea-多行文本输入区
文本域 cols列rows行。 描述textarea namedescription cols30 rows10/textarea button-按钮
之后可以结合js来使用。
input typebutton value按钮 reset-重置
把表单写的内容和清空重新填写。
input typereset value重置 submit-提交
把表单的信息post。
input typesubmit value提交 总结
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表单/title
/headbodyform action methodpost姓名input typetext namenamebrbr密码input typepassword namepasswordbrbr性别labelinput typeradio namegender value1 checkedchecked男/labellabelinput typeradio namegender value2女/labelbrbr爱好labelinput typecheckbox namehobby valueppq乒乓球/labellabelinput typecheckbox namehobby valuelq篮球/labellabelinput typecheckbox namehobby valuezq足球/labelbrbr图像input typefile nameimagebrbr生日input typedate namebirthdaybrbr时间input typetime nametimebrbr日期时间input typedatetime-local namedatetimebrbr邮箱input typeemail nameemailbrbr年龄input typenumber nameagebrbr学历select namedegreeoption value1初中/optionoption value2高中/optionoption value3大专/optionoption value4 selectedselected本科/optionoption value5硕士/optionoption value6博士/option/selectbrbr描述textarea namedescription cols30 rows10/textareabrbrinput typehidden nameid value1input typebutton value按钮input typereset value重置input typesubmit value提交/form
/body/html 这个日期属性我之前还用的是下拉框没想到有date属性比用select要方便一点。
