, wie die HTML und CSS von der Form bekommen

Question

ich eine Seite hier gesehen habe: https://thrivecompany.le-vel.com/Login?ReturnUrl=%2fAccount

Jetzt möchte ich die genaue HTML + CSS davon vollständig aus der Registrierung Teil kopieren.

Wie mache ich das? Kannst du es auch für mich hochziehen und es hier einfügen, wenn es möglich ist?

danke!

Gibt es eine Möglichkeit Jungs können Sie es hier oder fügen Sie auf JSFIDDLE herausziehen?

Answer 1

Control + Shift + J auf Google Chrome öffnet das Entwicklerfenster. Gehen Sie zum Element-Tab und Sie werden in der Lage sein, das gesamte HTML + CSS zu sehen. Probieren Sie es selbst aus, so dass Sie auch mit CSS inline lernen, debuggen und spielen können.

Answer 2

Sie können es auf Google Chrome mit F12 Schlüssel untersuchen, um zu sehen, was form ist und welche CSS ist damit asociated. Sie können den Code der Webseite auch herunterladen, wenn Sie mit der rechten Maustaste auf die Webseite klicken und "Save As..." drücken. Es wird in Ihrem Computer ein Ordner mit allen CSS, JS, HTML, Ressourcen usw. gespeichert, die die Webseite hat.

Answer 3

Grund Implementation (ohne zu viel Styling)

https://jsfiddle.net/ashwinshenoy/vmubcaq6/1/ \

<div class="content-block"> 
    <h3><span class="icon16 profile"></span>Create New Customer Account</h3> 

    <form action="/Login/CreateAccount" id="CreateAccountForm" method="post"> 
    <input name="__RequestVerificationToken" type="hidden" value="86bIeUrxTBQdZS06SchMTRYnReJ5oRfLYtSgGdAcw637GrhUoaAUdwv6AE1NCQyEe3pZim2SjMvoDkEmKleviECcJT3HACv9GzOvZtH_GVg1"> 
<div class="content-block"> 
    <div class="FormRow"> 
    <strong>Please confirm your referring Promoter:</strong> 
    </div> 
    <div class="FormRow"> 
    <label class="auto"> 
     <input checked="checked" data-val="true" data-val-booleanrequired="You Must Confirm Your Retailer" data-val-required="You Must Confirm Your Retailer" id="ConfirmRetailer" name="ConfirmRetailer" type="radio" value="True"> 
     <span class="field-validation-valid" data-valmsg-for="ConfirmRetailer" data-valmsg-replace="true"></span> I was referred by <strong>Nicole Anderson (thrivecompany)</strong> 
    </label> 
    </div> 
    <div class="FormRow"> 
    <label class="auto"> 
     <input id="ConfirmRetailer" name="ConfirmRetailer" type="radio" value="False"> I was referred by someone else 
    </label> 
    </div> 
    <div id="CreateAccount_ChangeReferralForm" class="center" style="display: none;"> 
    <div class="FormRow"> 
     <strong>http:// 
      <input data-val="true" data-val-regex="Invalid Characters" data-val-regex-pattern="(?!^\d+$)^[a-zA-Z0-9_]{3,15}$" data-val-remote="That Username does not exist" data-val-remote-additionalfields="*.ChangeUsername" data-val-remote-url="/JSON/CheckUsernameExists" id="ChangeUsername" name="ChangeUsername" type="text" value=""> 
       <span class="field-validation-valid" data-valmsg-for="ChangeUsername" data-valmsg-replace="true"></span> 
       .le-vel.com</strong> 
    </div> 
    <div class="FormRow"> 
     <a class="Button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="ChangeReferralButton" href="/Login/ClearReferral" role="button" aria-disabled="false"><span class="ui-button-text">Update My Referrer</span></a> 
    </div> 
    </div> 
</div> 
<div id="CreateAccount_MainForm" style="display: block;"> 
    <div class="FormRow"> 
    <label>Country:</label> 
    <select id="ShipCountry" name="ShipCountry"> 
     <option value="AU">Australia</option> 
     <option value="CA">Canada</option> 
     <option value="GB">United Kingdom</option> 
     <option value="NZ">New Zealand</option> 
     <option selected="selected" value="US">United States</option> 
    </select> 
    <span class="field-validation-valid" data-valmsg-for="ShipCountry" data-valmsg-replace="true"></span> 
    </div> 
    <div class="FormRow"> 
    <label>First Name:</label> 
    <input data-val="true" data-val-required="Please Enter Your First Name" id="FirstName" name="FirstName" type="text" value=""> 
    <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span> 
    </div> 
    <div class="FormRow"> 
    <label>Last Name:</label> 
    <input data-val="true" data-val-required="Please Enter Your Last Name" id="LastName" name="LastName" type="text" value=""> 
    <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span> 
    </div> 
    <div class="FormRow"> 
    <label>Email Address:</label> 
    <input data-val="true" data-val-email="Please Enter a Valid Email Address" data-val-remote="Your Email Address Has Been Used Already" data-val-remote-additionalfields="*.Email" data-val-remote-url="/JSON/CheckEmailAvailable" data-val-required="An Email Address is Required" 
    id="Email" name="Email" type="text" value=""> 
    <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span> 
    </div> 
    <div class="FormRow"> 
    <label>Choose Username:</label> 
    <input data-val="true" data-val-length="Must Be 5 to 15 Characaters" data-val-length-max="15" data-val-length-min="3" data-val-regex="Invalid Characters" data-val-regex-pattern="(?!^\d+$)^[a-zA-Z0-9_]{3,15}$" data-val-remote="Username Already Taken" data-val-remote-additionalfields="*.UserName" 
    data-val-remote-url="/JSON/CheckUsernameAvailable" data-val-required="A Username is Required" id="UserName" name="UserName" type="text" value=""> 
    <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span> 
    </div> 
    <div class="FormRow"> 
    <label>Password:</label> 
    <input data-val="true" data-val-length="Minimum 6 Characters" data-val-length-max="25" data-val-length-min="6" data-val-required="A Password is Required" id="Password" name="Password" type="password"> 
    <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span> 
    </div> 
    <div class="FormRow"> 
    <label>Confirm Password:</label> 
    <input data-val="true" data-val-equalto="Passwords Don't Match" data-val-equalto-other="*.Password" data-val-required="Please Confirm Your Password" id="PasswordConfirm" name="PasswordConfirm" type="password"> 
    <span class="field-validation-valid" data-valmsg-for="PasswordConfirm" data-valmsg-replace="true"></span> 
    </div> 
    <div class="FormRow"> 
    <label></label> 
    <button type="submit" id="CustomerLoginButton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Create Customer Account</span></button> 
    </div> 
    <input type="hidden" name="returnUrl"> 
</div> 
    </form> 

</div> 

Answer 4

Dies ist, was ich bekomme. Probieren Sie den folgenden Code aus und haben Sie Spaß.

<div class="content-block"> 
       <h3><span class="icon16 profile"></span>Create New Customer Account</h3> 

<form action="/Login/CreateAccount" id="CreateAccountForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="4FW5wggFH2JRvjlOtLdoLf-myfT3aJ0xz8I_NYrsf2RZvufijY9M__XhgrGDrNExAtpRe3nVzBG3ErIuHVScfnNUGTUlsvWHHGJE_cz2uiI1"> <div class="content-block"> 
     <div class="FormRow"> 
      <strong>Please confirm your referring Promoter:</strong> 
     </div> 
     <div class="FormRow"> 
      <label class="auto"> 
       <input checked="checked" data-val="true" data-val-booleanrequired="You Must Confirm Your Retailer" data-val-required="You Must Confirm Your Retailer" id="ConfirmRetailer" name="ConfirmRetailer" type="radio" value="True"> 
       <span class="field-validation-valid" data-valmsg-for="ConfirmRetailer" data-valmsg-replace="true"></span> 
       I was referred by <strong>Nicole Anderson (thrivecompany)</strong> 
      </label> 
     </div> 
     <div class="FormRow"> 

Und das ist die Verbindung der CSS