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 •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 • 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>
form元素
action制定URL
method,post,get
提交表单
表单中数据以"名=值"的形式发给服务器
控件组
把一组表单组织到fieldset中,legend描述的文本。
控件与标注
label与input,for与id值一致。
控件类型
text:基本单行文本框
password:文本显示为掩码
checkbox:复选框
radio:单选按钮
submit:提交表单按钮
time,date,search:HTML5文本框变体