引用自己创建的css样式表
First we create the HTML elements - input fields for First Name, Last Name, Email and a Text Area for the message.
首先，我们创建HTML元素-名字，姓氏，电子邮件和消息的文本区域的输入字段。
Later we apply CSS styles to make the form visually appealing.
后来，我们应用CSS样式使表格具有视觉吸引力。
HTML部分(The HTML part)
The HTML section has a div with classcontainerwith the headingh3”Contact Form”
HTML部分的div带有类container，标题为h3“Contact Form”
The form with namecontact_formcontains input fields for:
名称为contact_form的表单包含以下输入字段：
First Name名字 Last Name姓 Email电子邮件 Message信息
A div with classcenterto align the items center. Aninputtypesubmitto submit the form.Therequiredattribute in the text fields are checked for value on submission.
具有班次center的div以使项目中心对齐。 一个input型submit提交form.Therequired在文本字段属性是为在提交值检查。
<div class="container"><h3>Contact Form</h3><form action="#" name="contact_form"><label for="first_name">First Name</label><input name="first_name" type="text" required placeholder="John"/><br><label for="last_name">Last Name</label><input name="last_name" type="text" required placeholder="Doe"/><br><label for="email">Email</label><input name="email" type="email" required placeholder="you@"/><br><label for="message">Message</label><br><textarea name="message" cols="30" rows="10" placeholder="Enter your message here ..." required> </textarea><div class="center"><input type="submit" value="Submit"></div></form></div>
CSS部分(The CSS part)
/* Importing the Roboto font from Google Fonts. */@import url("/css?family=Roboto:400");/* Set font of all elements to 'Roboto' */* {font-family: 'Roboto', sans-serif;font-weight: 400;}/* Remove outline of all elements on focus */*:focus {outline: 0;}body {background: #263238; /* Set background color to #263238*/}h3 {text-align: center;}/* Add styles to 'container' class */.container {padding: 12px 24px 24px 24px;margin: 48px 12px;background: #E3F2FD;border-radius: 4px;}/* Add styles to 'label' selector */label {font-size: 0.85em;margin-left: 12px;}/* Add styles to 'input' and 'textarea' selectors */input[type=text],input[type=email], textarea {width: 100%;padding: 12px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;margin-top: 6px;margin-bottom: 16px;resize: vertical;}/* Add styles to show 'focus' of selector */input[type=text]:focus,input[type=email]:focus, textarea:focus {border: 1px solid green;}/* Add styles to the submit button */input[type=submit] {background: #64B5F6;margin: 0 auto;outline: 0;color: white;border: 0;padding: 12px 24px;border-radius: 4px;transition: all ease-in-out 0.1s;position: relative;display: inline-block;text-align: center;}/* Add styles for 'focus' property */input[type=submit]:focus {background: #A5D6A7;color: whitesmoke;}/* Style 'hover' property */input[type=submit]:hover {background: #2196F3;}/* Align items to center of the 'div' with the class 'center' */.center {text-align: center;}
输出量(Output)
更多信息：(More Information:)
Visit the FreeCodeCamp - Contact Form on Codepen.io
访问FreeCodeCamp -联系表上Codepen.io
翻译自: /news/how-to-create-a-contact-form-with-css/
引用自己创建的css样式表
