HTML表单元素

时间:2025/7/9 22:15:51来源：https://blog.csdn.net/qq_36324341/article/details/141073272 浏览次数:0次

HTML表单元素

表单把用户的信息发给服务器。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
</head><body><form class="stylin_form1" action="process_form.php" method="post"><h3>A Stylin' Form</h3><!-- 控件组，即各种控件的容器 --><fieldset><!-- 控件组文字说明或者标题 --><legend><span>Part 1 &#8226;Basic Controls</span></legend><!-- 单行文本输入控件 --><section><p class="note">* indicates required field</p><!-- for属性把标注和空间关联起来，它的值必须与空间ID值相同 --><label for="user_name">User Name <span style="color: red;">*</span></label><!-- text属性让这个控件可以输入文本 --><input type="text" id="user_name" name="user_name" /><p>Please select a user name</p></section><!-- 开始密码控件 --><section><label for="password">Password <span style="color: red;">*</span></label><!-- 密码文本显示为掩码 --><input type="password" id="password" name="password" maxlength="20" /><p>Password must be 8 or more characters</p></section><!-- 开始多行文本输入控件 --><section><label for="desc">Description: </label><textarea name="desc" id="desc" placeholder="Enter the desc here."></textarea></section><!-- 开始HTML5日期控件 --><section><label for="special_date">Date:</label><input type="date" id="special_date" name="event_date" min="2024-08-09" /></section></fieldset><fieldset><legend><span>Part 2 &#8226; Multiple-Choice Controls</span></legend><!-- 开始复选框 --><section><h4>Select Only One</h4><section><input checked="checked" id="radio1" name="radioset" type="radio" value="Choice_1" /><label for="radio1">Choice 1 is pre-selected and shows the text wraps nicelyif it goes to multiple lines.</label></section><section><input checked="checked" id="radio2" name="radioset" type="radio" value="Choice_1" /><label for="radio2">Choice 2</label></section><section><input checked="checked" id="radio3" name="radioset" type="radio" value="Choice_1" /><label for="radio3">Choice 3</label></section></section><!-- 开始选项列表(下拉列表) --><section><label for="select_choice">Select Your Choice</label><select name="select_choice" id="select_choice"><option value="0">None</option><option value="1">Choice 1</option><option value="2">Choice 2</option><option value="3">Choice 3</option><option value="4">Choice 4</option></select></section><!-- 开始提交按钮 --><section><input type="submit" value="Submit This Form" /></section></fieldset></form>
</body></html>