做家教需要什么哪个网站的会员,高端企业网站建设,17做网站广州新塘,竞价sem培训本文章属于学习笔记#xff0c;在https://www.freecodecamp.org/chinese/learn/2022/responsive-web-design/中练习
四、HTML表单
CSS
1、vh单位表示视口高度#xff0c;等于视口高度的1%。这使得它相对于视口高度。height:100vh;
2、设置 body 的默认 margin 为 0 来重置…本文章属于学习笔记在https://www.freecodecamp.org/chinese/learn/2022/responsive-web-design/中练习
四、HTML表单
CSS
1、vh单位表示视口高度等于视口高度的1%。这使得它相对于视口高度。height:100vh;
2、设置 body 的默认 margin 为 0 来重置一些浏览器的默认设置从而去掉水平滚动条。
3、background-color 设置为 #1b1b32使背景更护眼。 然后相应的把 color 设置为 #f5f6f7让文字显示出来。
4、method 属性指定了如何将表单数据发送到 action 属性中指定的 URL。 表单数据可以通过 GET 请求作为 URL 参数发送method“get”或通过 POST 请求作为请求正文中的数据发送method“post”。
form actionhttps://register-demo.freecodecamp.org methodpost/form5、rem 单位代表根 em与 html 元素的字体大小有关。label 元素默认是行内元素它们出现在其标签文本的同一行使得文本难以阅读。 给 label 元素添加 display: block并设置其 margin 为 0.5rem 0来使其显示在不同的行并且行之间有一定的距离。margin:0.5rem 0;
6、email 类型只允许包含 以及域名中包含 . 的电子邮件。input idemail typeemail/ password 类型会屏蔽输入如果网站没有启用 HTTPS 会警告。input idnew-password typepassword /
7、一些 type 属性值含有内置表单验证。 例如 typeemail 要求该值是一个有效的电子邮件地址。
给密码 input 元素添加自定义验证新增 minlength 属性设置其值为 8。 这样密码少于 8 个字符的时候会阻止提交。input idnew-password typepassword minlength8 required //label 8、在 typepassword 内可以使用 pattern 属性来使用正则表达式来校验密码。 给密码 input 元素添加 pattern 属性要求输入匹配 [a-z0-5]{8,}。
input idnew-password typepassword pattern[a-z0-5]{8,} required /9、两个输入添加required将向用户传递错误的信息。要解决这个问题您可以通过在第二个字段集中的标签元素之前添加一个带有文本Account类型(required)的图例元素来提供所需的上下文。然后将checked属性添加到Personal输入以确保提交的表单中包含所需的数据。
legendAccount type (required)/legend
labelinput typeradio nameaccount-type checked / Personal/label10、类型为 file 的 input 可以实现允许用户上传个人资料图片 labelinput typefileUpload a profile picture:/label 11、input 并设置其 type 为 number, min 属性最小值 max 属性最大值input typenumber min13 max120 12、使用 select 元素给表单添加一个下拉列表很方便。 select 元素是包含一组 option 元素的容器option 元素就是下拉列表的内容。 每一个元素都需要一个结束标签。 13、提交带有选择菜单的表单向服务端发送的信息 value 并不是预期的。 因此每一个 option 需要指定一个 value 属性。 如果没有指定向服务器默认提交的是 option 内的文本。 option value(select one)/optionoption value1freeCodeCamp News/optionoption value2freeCodeCamp YouTube Channel/optionoption value3freeCodeCamp Forum/optionoption value4Other/option14、textarea 元素和 text 类型的 input 类似区别是 textarea 有一些额外的好处比如可以方便地添加更多的文本以及设置默认显示的行数和列宽。 添加 rows 行和 cols列 属性来指定它的初始大小。placeholder 接受一个文本值在用户开始键入之前显示以提示用户textarea id bio rows3 cols30 placeholderI like coding on the beach.../textarea 15、选择 fieldset设置其 border-bottom 为 3px solid #3b3b4f来给它们添加一些间距。 border-bottom:3px solid #3b3b4f; 16、可以使用 last-of-type CSS 伪类选择特定类型的最后一个元素p:last-of-type { } 17、 width :unset。 这会清除之前设置的 input 元素的 width: 100% 规则。 18、同行里过于高了,设置其 vertical-align: middle 来修复这一点 19、_属性_选择器它根据给定的属性值选择元素。input[typesubmit]{ display:block; width:60%; }
styles.css
body {width: 100%;height: 100vh;margin: 0;background-color: #1b1b32;color: #f5f6f7;font-family: Tahoma;font-size: 16px;
}h1, p {margin: 1em auto;text-align: center;
}form {width: 60vw;max-width: 500px;min-width: 300px;margin: 0 auto;padding-bottom: 2em;
}fieldset {border: none;padding: 2rem 0;border-bottom: 3px solid #3b3b4f;
}fieldset:last-of-type {border-bottom: none;
}label {display: block;margin: 0.5rem 0;
}input,
textarea,
select {margin: 10px 0 0 0;width: 100%;min-height: 2em;
}input, textarea {background-color: #0a0a23;border: 1px solid #0a0a23;color: #ffffff;
}.inline {width: unset;margin: 0 0.5em 0 0;vertical-align: middle;
}input[typesubmit] {display: block;width: 60%;margin: 1em auto;height: 2em;font-size: 1.1rem;background-color: #3b3b4f;border-color: white;min-width: 300px;
}input[typefile] {padding: 1px 2px;
}.inline{display: inline;
}a{color:#dfdfe2;
}!DOCTYPE html
html langenheadmeta charsetUTF-8titleRegistration Form/titlelink relstylesheet hrefstyles.css //headbodyh1Registration Form/h1pPlease fill out this form with the required information/pform methodpost actionhttps://register-demo.freecodecamp.orgfieldsetlabel forfirst-nameEnter Your First Name: input idfirst-name namefirst-name typetext required //labellabel forlast-nameEnter Your Last Name: input idlast-name namelast-name typetext required //labellabel foremailEnter Your Email: input idemail nameemail typeemail required //labellabel fornew-passwordCreate a New Password: input idnew-password namenew-password typepassword pattern[a-z0-5]{8,} required //label/fieldsetfieldsetlegendAccount type (required)/legendlabel forpersonal-accountinput idpersonal-account typeradio nameaccount-type classinline checked / Personal/labellabel forbusiness-accountinput idbusiness-account typeradio nameaccount-type classinline / Business/label/fieldsetfieldsetlabel forprofile-pictureUpload a profile picture: input idprofile-picture typefile namefile //labellabel forageInput your age (years): input idage typenumber nameage min13 max120 //labellabel forreferrerHow did you hear about us?select idreferrer namereferreroption value(select one)/optionoption value1freeCodeCamp News/optionoption value2freeCodeCamp YouTube Channel/optionoption value3freeCodeCamp Forum/optionoption value4Other/option/select/labellabel forbioProvide a bio:textarea idbio namebio rows3 cols30 placeholderI like coding on the beach.../textarea/label/fieldsetlabel forterms-and-conditionsinput classinline idterms-and-conditions typecheckbox required nameterms-and-conditions / I accept the a hrefhttps://www.freecodecamp.org/news/terms-of-service/terms and conditions/a/labelinput typesubmit valueSubmit //form/body
/html使用学习网站
