Design the two forms given below in html. a) Registrationformfornewuser表单左侧插入一张图片, 输入框只需要下边框,输入框有姓、名、邮箱地址、密码、确认密码。表单表头register加粗b)Student Rregistration form表单表头红色加粗student registration form,输入框边框红色,输入框包括姓、名、性别选择、年龄、生日、密码、确认密码、电话号码、地址、状态选择、pin码、爱好选择音乐电影运动旅游等、上传照片、确认信息无误、验证非机器人。按钮为酒红色包括register和reset。表单边框为蓝青色加黑色边框线
时间: 2023-07-10 16:41:20 浏览: 102
好的,这里是两个表单的 HTML 代码。您可以根据需要进行修改和调整样式。
a) Registration form for new user:
```
<form>
<h2 style="font-weight: bold">Register</h2>
<div style="display: flex; align-items: center">
<img src="your-image-url.jpg" alt="registration-form-image" style="width: 150px; margin-right: 20px">
<div>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" style="border-bottom: 1px solid black"><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname" style="border-bottom: 1px solid black"><br>
<label for="email">Email Address:</label><br>
<input type="email" id="email" name="email" style="border-bottom: 1px solid black"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" style="border-bottom: 1px solid black"><br>
<label for="confirm-password">Confirm Password:</label><br>
<input type="password" id="confirm-password" name="confirm-password" style="border-bottom: 1px solid black"><br>
</div>
</div>
</form>
```
b) Student Registration form:
```
<form>
<h2 style="color: red; font-weight: bold">Student Registration Form</h2>
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="fname" style="border: 1px solid red"><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="lname" style="border: 1px solid red"><br>
<label for="gender">Gender:</label><br>
<select id="gender" name="gender" style="border: 1px solid red">
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" style="border: 1px solid red"><br>
<label for="birthday">Birthday:</label><br>
<input type="date" id="birthday" name="birthday" style="border: 1px solid red"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" style="border: 1px solid red"><br>
<label for="confirm-password">Confirm Password:</label><br>
<input type="password" id="confirm-password" name="confirm-password" style="border: 1px solid red"><br>
<label for="phone">Phone Number:</label><br>
<input type="tel" id="phone" name="phone" style="border: 1px solid red"><br>
<label for="address">Address:</label><br>
<textarea id="address" name="address" style="border: 1px solid red"></textarea><br>
<label for="status">Status:</label><br>
<select id="status" name="status" style="border: 1px solid red">
<option value="single">Single</option>
<option value="married">Married</option>
</select><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" style="border: 1px solid red"><br>
<label for="hobbies">Hobbies:</label><br>
<input type="checkbox" id="music" name="hobbies" value="music">
<label for="music">Music</label><br>
<input type="checkbox" id="movie" name="hobbies" value="movie">
<label for="movie">Movie</label><br>
<input type="checkbox" id="sports" name="hobbies" value="sports">
<label for="sports">Sports</label><br>
<input type="checkbox" id="travel" name="hobbies" value="travel">
<label for="travel">Travel</label><br>
<label for="photo">Upload Photo:</label><br>
<input type="file" id="photo" name="photo"><br>
<input type="checkbox" id="verification" name="verification" value="verification">
<label for="verification">I'm not a robot</label><br>
<button type="submit" style="background-color: #722f37; color: white">Register</button>
<button type="reset" style="background-color: #722f37; color: white">Reset</button>
</form>
```
阅读全文