HTML表单

基于freecodecamp和菜鸟教程学习总结

CSS单位

CSS有几个不同的单位表示长度
绝对长度：绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。

• px：像素

相对长度：相对长度单位指定了一个长度相对于另一个长度的属性，对于不同的设备相对长度更适用

• vh：viewport height，视窗高度，1vh=视窗高度的1%
• vw：viewport width，视窗宽度，1vw=视窗宽度的1%
• em：它是描述相对于当前对象文本的字体尺寸，若当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，一般浏览器字体大小默认为16px，1em=16px
• rem：rem代表根em（root em），作用于非根元素时相对于根元素字体大小；作用于根元素字体大小时相对于其初始字体大小

form

• method：该属性指定了如何将表单数据发送到action属性中指定的URL。表单数据可以通过GET请求作为URL参数发送，或通过POST请求作为请求正文中的数据发送

input

• minlength：一些type属性值含有内置表单验证。如type="email"要求该值是一个有效的电子邮件地址。可以为密码input元素添加自定义验证，设置minlength属性值为8，密码少于8个字符的时候会阻止提交
• pattern：在type="password"内可以使用pattern属性来使用正则表达式来校验密码
• type=“file”：可以定义文件选择字段和“浏览…”按钮，供文件上传
• type=“number”：定义用于输入数字的字段，如年龄。还可以设置min和max属性来控制可输入数字的最大最小范围
• name：在提交表单时，向每个可提交的元素提供name属性很有用，此属性用于表单提交识别时识别不同的元素

select

该元素定义一个下拉列表

option

该元素定义了下拉列表中的可用选线

• value：提交带有选择菜单的表单向服务端发送的信息value并不是预期的。每一个option需要指定一个value属性，如果没有指定，向服务器默认提交的是option内的文本

textarea

该元素和text类型的input类似，区别是它定义了一个多行的文本输入控件，可以方便地添加更多的文本以及设置默认显示的行数和列宽

• rows：规定文本区域内可见的行数
• cols：规定文本区域内可见的宽度
• placeholder：规定一个简短的提示，描述文本区域期望的输入值

last-of-type

该元素匹配元素其父级的该元素类型的最后一个子元素

fieldset:last-of-type{
border-bottom:none;
}

上述代码会创建一个定位最后一个fieldset元素的选择器，并将它的下边框移除

unset

.inline{
width:unset;
}

unset会清除之前设置的input元素的width规则

vertical-align

该属性设置一个元素的垂直对齐方式。在表单元素中，这个属性会设置单元格框中的单元格内容的对齐方式

• middle：将此元素放置在父元素的中部

最后

以上就是高大钻石为你收集整理的HTML表单的全部内容，希望文章能够帮你解决HTML表单所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。