我該如何創建一個這樣的表單？使用html5和css3

Question

表單包含邊框文本在角落我堅持如何使這種佈局。

Answer 1

<b> <div style='color:darkblue'> A Simple Form </div> </b> 
 
<i> <div> form fundametals </div> </i> 
 

 
<form> 
 
<fieldset> 
 
    <legend>Customer Info:</legend> 
 
    Name: <input type="text" name="name" placeholder="Enter Your Name"><br> 
 
    Telephone: <input type="tel" name="tel" placeholder="Pattern: 1-234-567-8910" ><br> 
 
    Email Address: <input type="email" name="email" placeholder="Enter Your Email Address"> 
 
</fieldset> 
 
    
 
    
 
<fieldset> 
 
    <legend> Book:</legend> 
 
    <input type="text"> Quantity (Maximum 5) <input type="number" name="quantity" max="5"> <br> 
 

 
</fieldset> 
 
    
 
<br> 
 
<input type="button" name="submit" value="Submit"> 
 
    
 
</form>

Answer 2

「我們怎樣才能圓邊？」

例如，通過爲「border-radius：5px」添加樣式到該元素。

Answer 3

@ DanielaB67 ...你要像這樣...

fieldset { 
 
    border: 2px solid #a1a1a1; 
 
    padding: 10px 10px; 
 
    background: #dddddd; 
 
    width: 300px; 
 
    border-radius: 25px; 
 
}

<b> <div style='color:darkblue'> A Simple Form </div> </b> 
 
<i> <div> form fundametals </div> </i> 
 

 
<form> 
 
<fieldset> 
 
    <legend>Customer Info:</legend> 
 
    Name: <input type="text" name="name" placeholder="Enter Your Name"><br> 
 
    Telephone: <input type="tel" name="tel" placeholder="Pattern: 1-234-567-8910" ><br> 
 
    Email Address: <input type="email" name="email" placeholder="Enter Your Email Address"> 
 
</fieldset> 
 
    
 
    
 
<fieldset> 
 
    <legend> Book:</legend> 
 
    <input type="text"> Quantity(Maximum 5)<br> <input type="number" name="quantity" max="5"> <br> 
 

 
</fieldset> 
 
    
 
<br> 
 
<input type="button" name="submit" value="Submit"> 
 
    
 
</form>