diff options
Diffstat (limited to 'devdocs/html/element%2Finput%2Fradio.html')
| -rw-r--r-- | devdocs/html/element%2Finput%2Fradio.html | 282 |
1 files changed, 282 insertions, 0 deletions
diff --git a/devdocs/html/element%2Finput%2Fradio.html b/devdocs/html/element%2Finput%2Fradio.html new file mode 100644 index 00000000..255886b5 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fradio.html @@ -0,0 +1,282 @@ +<header><h1><input type="radio"></h1></header><div class="section-content"> +<p><a href="../input"><code><input></code></a> elements of type <code>radio</code> are generally used in <strong>radio groups</strong>—collections of radio buttons describing a set of related options.</p> <p>Only one radio button in a given group can be selected at the same time. Radio buttons are typically rendered as small circles, which are filled or highlighted when selected.</p> +</div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-radio.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>They are called radio buttons because they look and operate in a similar manner to the push buttons on old-fashioned radios, such as the one shown below.</p> <p> <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCAGQAlgDASIAAhEBAxEB/8QAGwAAAgMBAQEAAAAAAAAAAAAAAAECAwQFBgf/xAAXAQEBAQEAAAAAAAAAAAAAAAAAAQID/9oADAMBAAIQAxAAAAHxpExZJKpEUTK0WlIXmcNCoC9UhaVBaqwsUCpKLQAAAQwQwQwQ0AMQwQMQAAAAAAAAAAwQwRIIkgiTREkyBMIqYRGCGCJEsRFjEwAATAAAAAAABoAAAAAAYhghghghghsiSZAmESSlRJCYAADQNwZIJEFYissZWrWUF4Uu0ISIk1EJDmVuUBlKLikAmJEmLWWBW5ogWCVlgsCaIkkIYAAAA0DIgxXFS2SMJuDCtwYXvkc46cDny3wM03WWKllhUFsqImlZg0rOy2NYTIFligE1EGIlbnYUKdpnsq0FuykxZ4uzy1zVaKN5Qyy2KulqNek5a7Acc7EDlLr2HFPQWnmT0gcG3qZyuVVZe8si0qibpcmk7hwmdmnlhvpzXFitwmkzFlsI7FxnU5ggEAC40WS80CwAAaNEJEtDsmZ3okZTbIwG8MBvIy3SRW0ijq8q2urTGWNXZLsdkars+oyJZ62vzhL2qOWjoRwh0DnM6FWy049LVMQEo3k6Pf8Ak8uQxagAHV5XYls4fe4IBbZTvhul3ea9JmzeEd6085s7YcnF6BHnLO7UcqW6srsqjVss1ZvXPR0DAGxZBNMc4XKuFWqsJScyJOcURUaaTsAC6zJKW5QiTqJUiwi7v+b9aeZzbaShb7zkneuKNurVL4A91cngF9AgvgtfsayjBqhHPutpLtHKqO/Py1K+rPKNPU0+bDuw4iOrDmWVqqpuKYbufZNQCZvsjmR6ly8QZqFteyKZbqc3nLTn1FbVYaraLs2GPZmsoYWXwdssbYi1Uac1jBWAAFsZYAWIbJEiXZ7byKxr2VPlEejz+bqs9HRwHXXq52hLKNXOUlUrLjozjlHo2vmY+58GkkipdLH6qOLo36s65HG9HzbOIM3m/wBV5H2fPeJ1683PwO3zdTmAbz19/O041G6E488XUdMvbi6EaKyzOsWfXg3mcUHVouqzXTpzGVhqPXj2xCVbVZtMbKFqRmejMNxLBgqvplFxQGtKMtlmeyJUWRrT7TxPvI5O7i9wwcjrZTyqktT1dLebZZIl2+F9x5Kzn7cerUh3OL3Ja+ly92bDJ1eZHnRrpk9h5D02aaCjGq8m/BqcYDeerdzd+dbczpyx5OpHc5nUlbGa2IZ8XaqObPVCpqqBpWRGiWWSaY1RLlQi0pVTUUSIuxkZSoCkAiAOhRbDOozjJJEXLH6J8+9uV3PJLPndnkHkxm89rr+fuzfU0crXLPh7MtnGOpdZxfVZdksIX1SvFrDy9vfhZyunXSdKPLoOyuAjtT4YduHHR1acEa200CWRgVYoBYq2NK4qSYAVYSlFMZIQFhODHC0lqd8Cpl5QpxsQBIiGois2UvW6F8Q/bEeI7/YmYs2nKGjBUbNHn6K9SvJB7CHkox6vP5xV148mKdHPmVaq6QtKwsWjSc1IBpEkma8nW5IJoGgfQ5+4wFthnNsowS6d0vDt6tVcqfURhWyBC2EIc80q0GVGuOZFzhWltEq6LqAnAEQ1QAXjM3RXUi2V2cSrVWRgE1AHbT2zFi9HwCoYLfh6ZVg6XPIjQF+gwHWujHv0Tl8q/Xs8aewieYu7tEZ6511fPnUHoY8By9yrkxs69PPuLanGowgWDkFdc4DlVYXiUKm6NRasK4yRJxRKKQgLAAAAANLjLNdd1a9enfjs5MO1dHnz1Ok8avd3L8/3+xRx+b6TPHE0bMxZr5GU9Ff46k9qeL6J3c3PpOhRh6xz8/Vx1mhl22RnfAzwurMwMQnZqthdLTVqRltrCWW2ZXbXA2xxBbCJY3MlRZIzx3swy1RMb2oxrVlJXUXFA42O2vVLkVkLEAdTPty513/Q/PtUewq4Epepl5t9OvUJydN3OrXnp3mbn7aLKIiGIGgDucPtkI2zOB2KYGlZtxh2cms79FGWNebOVozdOow3brpedn7048/q6lRxn2c1Zp2IJ56ToLms6ceazcskE01qupRQMQNRVlkEAABMI3xlLVC5FZYJoRCWXS5W83LqYq4WiyZddziN0b8FHQ811yfK7Pni+vs4jn9jL3TzVforYp4/qZy+J2+mDzdXo6jk9GvMar+NQekr8yz0y81M7NfNDXTQWIttrGtYZpW1EFdcYp3ZyxV6CsUium+iwAAAAAACTsKlbCW0jI6XY8zozex51VVYVFmqLUo16s8pHfgQVv0A8Bq9XlXLKrObdfncZ7OPhg9uvFXHpsnMSbcsIVVT0NJx9e5HM12MMe2BhvjMnO3hHYpqZOnXWBdmLKpSjFvouKadtZl0wVFOrOE4ItlVCKi80rUiISaJyzxNSzMujWWWEBXEECTWI0IZJqiQll7fwsa7XElEO1xdRO/JmOmuYV0jmh04c8To5szNnUwbZZ0dLnGzHq55pee8uqqUtldmdKdNWsx3OC22cWmzvVYp5umjNm1OhPmB0Y4ABlkp1CuMkiJBFtkQAEDBiGCJMgWEsC1lRYFZYEW0MiFtXoNR5Ofrcx5g2wrIdjkQgVjAlDRprmnSSc462tfP6+9OOPy+tXU3hzR16+YHXhy2acrVgxkHIIkgQxUNQAA0xKSsTcpa3Yyp2hUXBU7ERJRJFaLipkyINMIkgi3Ig7CK3YyktD2PmPU82Xib5Op1uFkM26Rm15cZ3TzQdyjkB1zjo62XCiaiDEDTQAwAEMIuUistZSXhSXszytiRkSiDESSkBJkI6ZrlXQtjlna0S+en6Ul86/SEeTr9Jx95yO4srsU1YoE3Ui2EAZd1I4i9Tql8Ye2DzeSiGs3OhVfGkLYRAAENkHOZS75mU1TMUtUoxvWLmdwVqYRCKTIsSkyC1zlxPpWy8g7iOLL10M3zFnpiPNaO3mXHdthFE5EsdCAjttOXDuX2cQ6t5xbOwHNr6hXmOV3/AD+plrUt4rGqYADDp+j8c8a9Tq8YHrDyoZTs3WcB92Bxp6ZmW2VRZPMjTHPIulQE4EQiyyKaHOv0MvDn6OzGvOS9E487s17V5l2pZVFk1ybYMI7rTlw7llnDu19M4U+8q40+qJwOrk6EsRV2XZLaJd0YQqxVshbXIlEric6LDz/G2c7eYFcdywoEvjSquhFE0kNAIZWoJ4sC1FRdIzrUGY1BlNQZXoiQauIPXccyHXvPPb+hwpfUvf0OeuFZ24nIh2chpkSsclGly+nypeyoFkyiEQ04ta2EJorKQw7eduliVhOi3MdClVlyqoNF3m6rPV1+Yx16+vxdFRjet4rGUJRJKKJJBJJiUkAw6R3DN4Z2g4Z3ZHG0a8JrszaZYxeSNU8cjZRliaabdi0bVQdrwP0n51Z7Lq8Ts4rItVRZTGxJVKLiPn7uZHYqnQTgqlW7h57PRvzOez1p4vKej6vziWp73F4pnqeVzDU6ebMJKuRUW5EZAEJ1EnCYhxGRKsjESSQDQNAAB17PRHHpwdvVwEsPZ4VGW6Vmi/BozYKCLSF9Ri0WSyxOucJHs/B07bO33vK97F1R5+KXtUcTn2eyn8+hqfQM3gyvX8PmOzvYucVrzRdkSSEMAABAyKJlRZcqgsigakEVYyotiQnCY1JSobIEwirAgWMrc2QJh6bHK3Gs7nkNE+VVZ24cQO0cQrt18YNuWCskRYxA5QCx1siMIOQJiGIAiiZWi0pLLVWE0gFJkCbK3MIOTliWMqdrKXdIodtkZ3YyssRUShTQAIGIGAAMQwQBaqmSimAgYgaYIkystZS5oi2iZFEyLiMIqmJ2RJhAmyDmlRYRAtZSaAzvROMr1Bnd4tM5SiokqFJEk4wyIOUJCQUIEhFlIAEwAATQwQwYiwP/xAAwEAABAwMDAwMDBAIDAQAAAAABAAIDEQQSEwUhFBAgIjAVMSMyJDNAQURCQyVQNP/aAAgBAQABBQL2KdqduFwqhZBZBZLNZLMrIrIqp/8AToqhZBZrNZrIrIqpVT/6FFRUVFRcf+xQqhVFRUVFRUVPGvs4lYFYFYqgXpXpVB2qsv8AwKd+PCvevt4uWm5aZWCxaqMXpXHaqyKqVVcLhV7U7Ur/AAaKhVFRUVFQLj+HQlab1oyLQetJYNVIl9tentVZuWZVVULhVVVkVX2WoBNaHJ8dEQjyO1CqKioqeNVVVVfe+qEUhQtZyujnXSuC0GLTgCxtkGwqjF9FqEIzPRlci9EtVWrILJZuWR/gNX+gTh6U0IDtlqRv+v8Af8ARvchbTldBdU+PnXR0XTQhYWYX6JUgoAiXIzS06mRGYlF7FWFZxLVWs4LXlWrIiSfMRuIcwtb5NR5HtALmmJRa7FWcbZZXChTOGSdj9ewikKFrcOQ267K+MukdueF0cQGjZhU28BotKYMKxeFnMxG5np1LyjKyrnW5WdstWMLqV1cyN1OVrSebY3Pb0slfCBsb3BjHM8YfxlH2/Jp9PJbpvWi9aDloLRC0WrTYFSMKsYWo1aq1FmamR3Zh5rkgiaAmp7m6uV1UqdMEZLcrK0C1LddSF1kgXXXKN1OU6R7/ABa0uItpnJ7HRv8AFjYOknhDYvC3cWKEhxIoe9u0lwZR8lNRYOWjIunkQjkajDIV0q6Zq0I1hEF9kLVjC1mrXWsVqvWciq9c9uFwqhVWSr4hyzRK+qJ7D2YrON8M9pFFb+MTzHI389wZjP428bjbtoZu2m8oW0zlDbzNTWXK+OkJ+NXxzF0EIXTW7UW2rTq2wRu4l1rF1iN05GeQnVlKzkXK4XpVQqhVVVVcqh8GNyWIBc1rQGA+xkVkiSe3HaINdNoQ26m09fxtYHS2cLnXFx4wtdqa0lLq3uLmUbXcFDaZV8Svio0NrgC6C1C0rNg1LJi662CO4wo7kF8i9ddLU3twV1NwUZJSjyqNXpVQslksiqlVPYAuJheAYXANhBBFD2jFXvALTy4Hh/D+0X5fRPByH0k/L2/6+inlhkubkRCYQyFCzuXIbbdobRdFDZp1FYSxB1g55Gz24XxlqF01ixCWwYvkLMI7rbBP3OF6O7I7pMjuN0V1l2U6e4ci55VGr0KrVULJZrIrJBj3Pcx7XyW0sTW2crmd4YWaLbZvUvjY4PY147A0IJ0f+b/SYUlpXsz85IyT/wAh4bKPudmnEk5xscS7/jl/PxH4u+viY6KKWybB8jZtR3a2R3mFHeUd4lp8rdI7jeFdVdvRMyc3ijVwvSsgslmVmVkVU9gKkWMhuprExp9gzGG0h0LiLRn7QUM+P6oettMjX13DcbjtDzZGnVf4/wDlHju/iz/3dxHcj1tR7f8AL/o78Zvy7tbQNFEfxl+vjVE18GtqDwmu4ccg0R0LWhONEXrMpubyWyNdJaXETIdvnnjcwxv7W9qJLLbYI557a1hfM+2hkUjGT+EBpPLI2DcYS19p/nf4e5j9V2acXf5jeLP/ADfpBfNpddrL8/ylKrWaUUm7TcQg/ZcPTP8Aj3/2P7Z5Mn4d8wmu4Bdk5rnLSctErSCcxoHnVV5qggiirJgkvGsxuWyxXD21fcVpY7syl322z12ez/ltcmRj428encZW4zKCPIyxmF+6cqH7e0vP6qQfpdz8Mqv+kDj+pk/+bcR9ztYH730tafqB+3cilx2uf24vXAZGieVzdNYkrTemiQAMkB03VdHVYRL7IWUazFdUrUes3rJyK49p317BU7W5wuaUvm2LrZ443Nw/6vdxXvs59dqNG2t7cWl4OLR//wBt62l4mTFjXyulV3V+3Xv2retYC2r7v12Hdh/Rhv6lnri/KS+/DtBKIppZYzCJiRHrBrreeV/SELo0YGLC3Dq2oUc0DXPuQuocteRakiyd24XCqFkqqqr7zh5fRP8A/q+lvIaX4blHe1ftnbaz+smiYYHhus0ffLqx7kKXveL7m23VlNcXMFH2xu42391LE20QikKFpOUIbk2mF4WR2k0S6AZG2tgSLJr9WyC6yAI3y619eolDdaZFzz29KyCqFkqqqr4tbkv9fFn5u+vsglpr5HlB2UDB+rc6sLKDcJR/0vaxON7uQb1s1wzoeutQ61uG9PcNnupxYXRXxlwhtUibYPbGbSNpNvYNNduYurs2J25Nr8mUdwmRvbkrqJCS95XC9KqFVZLJZFV7UPsRmjvCP6gcHxH1cCTpuWk5ObiViEeD4k+QvGfG9eSrZ17HFobi+5ltb65A2jJDZ2L420atHa2IG0EvyVq1Hd2I7s9Ov53SG+uijc3DkXOKD8RUVqFVZKpVT5SwmIeU3MHiG1CZ3bE5y0ZKsheDg6uitFqwjX2gi9i1Qg+i1Si9yJqUDRHk+AVOW7I0IbRbhGz26Nf9SxddYRp1+Iy7eE7eJV8nduXVXzi584JJcqNXCyCyWSyKqVU+cUbXx3kDYT5TOD7Tyza6203ldPMULWVdK6os020YDoRBOEAGrE1azEZqjWctV6MjlkStMqgCJHYEVqqc+yEV1EzyaFDBZNCyWdFqFZFZOCyPZsb3hls9/jAxr4btjWv87blX3qh8BDIULScrRnMI2+RDbl0DABZQBFloxaloxG5iyN6EbtyN1IteQrOUrF6xQAX1WRVUFRcL0o0QdRZLIr++VgUW0Tvr7FFTtFayTCWJ0MvnaPxtvttvpGYSd7Pl9z6oO4ikKFncFDbrgobXMo9udG9tmJWfH24WhZxrVs2LrrcA7jGjuBTr15JvZ0bmUoylBuaxoqI0CABGktE1oAmmpGFC9i1ec07hyH0DBWjVRqohwqo0XCyVVX3Co3SDbdwIN95wSMbFqx9U63nmuBttyUNpuENocmbU1pi26Es6OzYsrCNdfatTtzhXyQAO5yI7hcI3sxRmkKMb3Ix84goR1cRRPHHhUCPXYEZnPBD3uZnQxyp0JDEymbWDtkqNRNXUQKyWSr2FK96dmirmsr4NbXy/14Vg9rGPspXSDbLsobPcr4VybsrE3abcL4+zasbCI9bZMTtzgBO6sR3V6O6XCO4XJTrqYovyVWrJC3KFoU9jI2MLHyNh9JxaJjEQnyRuJunOdqzF33pAWkRKneLlD0gy1Qe5NLWHMLILIhublU+LVpvWi9dO5dMtBqwiCOlTUYFrBOk1GIcOa6iP1QQ/Fwoe1xDouW16C6yyYpdxtnRndYwju5Tt2nTtzuV1ly8F8zkYY9MiHHCrtNr0SVXzlmmimc+8ctC6mcugK6eAPZHApYqyBgbHr869AJgDJJkhCe8YGcjQB2YQGk80dRjJqCCSnRvQtKjpowSy3as7YLXjCdPkDO9aj1m5VXpVQslyViV9B5DkE17UVxbOt+8LXyLQJTYnKR7Y3xxOmiMDmNlbDiTZ6kxgMNtOIJPkHqkutcDG48xKwp9wHHW1E/TifrijZ35XGqxpe49oCNOUUlQ5UbX4dJOugmTbB4Iss10UDVhZtRfahdVEE+fKJs8jWGaSplkVV6VULJVcqHtRlfSvSqhZLIqp8qUVFisSqLhelOe55r2t3YwdZc4al4575HSu0pelisDNGbCKNr47BkulGYYIJY5tV2MsjZFNJrTCGQtewscjaRsEjQyRQNbhcik6tnhquDrSi2ncht9yUbad4+KK+LYuit42htiwdRZMXyEIT77JG+mRvJyjcSlF9V9tZBZr1lYPVARi1ehUCwcqHtQKjXe3QrEr6L6D1FWlq24I2uAK5tbaC3oE6lKd7ZzQ43hDuoDQ42pLbmNjNcLqHIGQw3mUc6saK/b9lQzR6Uw15G2dw9Nhul8VM542dfHBgNjahY7awdZZMHycQTt0KO5TlG+uCjczFF9V6VkAsiqSlaMy0lpsX2QA0FaT1i8KpVGE/ZCaWOc0ZPkfIwiR2R/dGGZoEJfXGDn7OJXqXK47DOjXSRvN5OU+Rz16VUedVVNilKbZXTlFa3Yik225neNlTdojahYWpbTbY069s2g7vAE7eE7dJSTuN0U68uHJ0pcvSsgE2KVxDZC7pJF0QBfHGF+nTWsKbDIVjK1UeRixxEcRYZYkC4wwTyOlgLpU+OkeLMTgYpnsdK+N2oIZEcw/DM0iRdGXemnKyesiViVg5YKgVGrBYFfRVVWKrFmtRyyd3oqeP9Db49S609RRUEz720ge7eLYJ28tUm7PeDul2Ub66KM0jl6VWiDkIp3Lo7qnTOWhEFjatI0ChE8lzJwmlzFi1y+25CNpi1G9N1s4QfLJB08ZhVurWVkUj3xzpjLrBrbiKJkbY5PtsdjGI/SmkKlxQ1Xp0/Sh+QlxGvIhJVZtWogfSSxVjWYWq5ajyqk+1VV8KrJZJt20Wl/oV7bgD1QincujuyukkXTxBYWjUTZtWvAF1S664oZ5ireLqLiKKN7cXhsFxNLMMrh8kbTbANfuLZ7dGeISMvWYsMhAtpRbdKg0W7qQYhsOkxs9RHeJ5nkXSvchFpoy24XUtQfqsq0LUaw9mvc1ar0XE/yKLErFH618o7maIG5nKJqfYsXBt7FVrWvvcdK4DRnNJ+lYHzWz0zCms8IzTlSUmYWWITpLZrZInmbRkRdoxGaQ9o7jBpuynzyPb/IoqKixWK4XpWSyKqVz2kdlJ2xcB7/VTq6OUCtIpuq6sRI7lcpt490mVsFrW4U02r3qaeFFT+FRYlYrFYhUavSsgslUqpXKoqebbd70LS8WncsUuvayyW7ur6eUAWNZiC0+At5ihYXNOkWjbhNjtimwVQtJwsZmI3UkD/kLlOuJpPGn8OioqFYrFUC4XCqqqpXPuUK03LBYhcLhHbr16dbuydEGtl52WSO5+Qe29RDq6drURQFC1eV01yF62om3VduC6q2ahuL2o7jeFOubhyNXH+JRYlYqiouO1VVV7U7UVAuFRYvWlIiO1FiUGrTK0lptVI1k0LUWoVUrnw+RupFNb311IdvlC6eBsZFgs9vaOsiC+RuUb28cjLI5elVaqhZLJZH26eFFiViVisVQLjtkqrlclc+FCqOrovWgULZC0XRqOEEm3YFhGvR2mjzR9CzWoqkrCRYOVF6FViyWTlFG6ZzLCqFhFQbdBkLKDF15O5OfkqsWYWotQrNyqfZoqeFFiVg5YFYLEKgXCr2qqrntRcKlViVpuQictErQNRagrpV0yMLWjSjpHiHGjVkFms0eS1wLdJ5XTvQtHLo1Lt7HsfAyNkpxWcpJJKp5WbtM67Wrq4yDeQZ9bBjX3KLErTctJy01pimLV6FUKrVWi5XPlQrE10HIW5QtXLo10nAh0XG3joI2BUYuEeQx2BJoqrlBrytCRyxc1dIhaNQt41pNCnY3Tj/D+6qqqpj6JvqjTtXtyqKiD6DMrMrNy1neFCsStNy0nVFtVaAy0WBYsCq1ZBaxReVkVU+NFiVg9aLl05TYPV0aFoumC0GIxR0h9LzwskXLJO9QgdRGJ60JCumehZuXRAqOKkug0HBq4VVJTMu4qqqql/bjP2qqqqqp7vsSrBYhUb2571CyCzVXLnt0aMEDWDpQpJoFqNWuFrvRkcVVVVVkq+wFFG17RCxCNoVAqgKXlMfqR5Kq9SweV071GHSnpF0rULdgWkxXUbdKEtMNQqrJVX+UVXvJ9T9K95P2ov2aI9geHXbGskma9agWosiquVCqKi48qErFU707UVPGlVgUIytNYtXpXCpVW0lEWkLkrTeVouK6UlaJgdoimm1YjsQFEf1Zdz3uf2If2l9T/Y+v+a40VVVVUid+PeV1IYT9mqJWS1AA/wBT8UO/Kp7PKofCiosVRUC9Kq1ZoyUWqgJHIWd25fHXS6DFR2EMplsGwAH7lkNSHELhcKquP2R+PcocXpVVVZKbmKL9hVoihwgf1snhM6iyqyqyCdNG1XN4zTg3MMjduqduMhRvZnIyPd4VWSqq+zTtwqrMLOqEczkLG8chtd4vi3rorVq09uas9uCFzCF11yAb29eiZXDRY5zLS2Lto4ur5tWV520/YJr4S/tt/bWXf/McqoqqlP2oz9iqLlVVQlHXPcEZ42p1/AE7dI1PfOmXyE5BupyjJI5UVPCnPjTtQUVVXy6C2atDbAstqaur29qG5Mavlrkp1/elG5uXGGN00MdiHp8ETEQAqvXqRYsWptKWcjymY5bcf+0uh9v/AI9rPo/v+6qqf+2z9lcdwf10hVVVOeAri5Y2GHcYhCdzjR3VHdJSjfzlEuLi+RyoqexTyHvCJaEhIs3FR2LM+kYA6gePS13CsHfq3KhK0JCunmWi5pEQCwYsIENEKORjVa2/6y6lYyMcw7Wj+Ve8rqRxyAwVRnYE6+hanbnEjeu6l+6lyN/MSbu4ci+Ryoqe7VVWSyVSufeoVRUWKoNJ/Dhw8F2Ujw175WU1GueXQVZMyNz7qR56uULUlehBO5C0uVo0P6cLVtGrrLYI3q6+4T3ySFgpBtsgDpJQ1zrqNoO4RBHdGqW/fK1s8zAZJXLkrFU92qqslXvRUVFRU8KL6Id6Kioqew27aA66XVPeQ25chYzldHI0m3atOzC1LBi6yAL5KRqduV25OuZ3ouKquPKq/v1FYrFU9uqqqqqque1FRUVPYoVisViqfwOqtk3ccAdzuSnXly5GR7kV6VUKqyK5/iVWSyWSque1FRU9nErFYrFYqn8bJZKq592ixKwVFwuEVVVWSqqlcqioqKnsUKxWCxQaFiPa/r+LXzoVisVRq9K47ZKviRzRU9nErBYLBYqneip2H1d9fA/x6FYFf//EACARAAIBBQEAAwEAAAAAAAAAABEAARASQCAhMGAxUHD/2gAIAQMBAT8B+XznjCHhbLahDzQpwghFOPKFKU6jODNIpNIxo2nSaRSaRUZcacoUpTlFKfUIQjJCEIRDx4lKcUI1KU/mBCK8ocYIRTjxKUpwOeZT/Ag2trazG4RghCG1tQjwnUpShHla2oRoUp8pwvpKfcphu9QjWfIwmG5uSn1GkaFNIoW5uSnFOh+Ef//EACIRAAICAgMBAAIDAAAAAAAAAAARARIQITAgQAIxIkFQYP/aAAgBAgEBPwH/ADb8kcyELmYxjzOI44nsxl4LwWHI5NmxCELgXdjLFhmzZsUiKwVgXRjy+kdI4l2jEjInH1j5xP5zOIzGJy+GSevzicRj6xH5xMbw4HGGb8E9P5FhkzGXJsUikRWCovSiouCOrgtBYZs3leRwOC5Yf0fsfsVkqVgUeNjGbNmxFRQKPAx8qFyMtBaBjNmxCF5XA4GOTZsRUrAvBMSRHChCF/XKRCF6n7d+F92WguXLkfXZwWgtwMYx9mWgsXLlpHOUIQsR1mGVKliw5N95lFy5aRzlCEVFwxHG+m8/kQudSVkpPK0MY8RJ88MRIpKyUKFYFHLYZGJyhFZEiTZWShQrBWPKsoQheRj9rGMfh//EAEoQAAECBAEJAwoEBAMGBwEAAAEAAhEDITESIjJxBBCBkUFRIGEzE6GCMEJysSOSUmLBQAU00RRQ4UPwYCREg6LxY3Bzo7LC0uL/2gAIAQEABj8C9ZdX/wBgbf8AkRZW2XCzldc1mlZoXsq/9gv+lsVZclnNWes4r2lmlZgXsq4WcrnZZWCqqAKwX5foLK36qxWY7gswrkN6q9nFeKFnngrPK8N3FeEN5VmBZzdy8TzLOcuazfOrDbf1MVX+xUlu4LwnLM84VXyhpcq6xKVdYG5q8V50NVJc9ypqr97l/CsGkqjZDV4ssaAv4g7mrxZhXtnSVmedZoVm8FdXP6IqOwba3H6OjHH0VSTM+leC7zLKwN0vWVrGrj01XXJe4Er+JcdDFQz3cFTVJ53qn7f9TlTVNXbpgvE1YaF/GDcxROtTToC8Sed6zHnS5UkD6ivCl/SqBg0NWeVnu4qp7caIE9tu9Ax9Zmqy7tga5wFD2jtox30lUkTPpXgO8yq1rdL1lT9XbpmKuuyN1Vla7H3Za8acdDQsnV9besj9snH3nFU/bZQ94rN1KXwX8Xqrfd/7Kv7ifRlrK1vWX6KfEqp1h2lwX8OTpesnV5e8krwZP0K4GhoXiuXiP+rtuIFG3RGTECteyWvubKMtlYWPa0mCPb5oDCVm7OSurrns5bbKytt+Ciq7dG3+K1NmhV/c/olrL1/WHe6yCypmtu0uCpq73e9Mh8FTVG75hVNW1cejFZLZbPdlheKRoAVZ0z6llOcdJ7MGgk9AqS3Xw2Ra8QI7RfhjMZV1e9P8nJGSco9KDsvd7IFR15LHhgXX3Q/modOw4tq4NopeKgAppToGkdma7gswrNQGR3RUC4LO8yuVz4rlxXsr/BUis0rNVgrhZyzlfsW7ff2ID1bJjp4Ajl9wRmDyjo5vdSNe0HNNe9Hpi/8AyUO9g/l2otEQ6YMXcAtaJdDOG7bmO4Lwn8E4O1fEHdXQTWjyUWioxKLpjIqs3zLPcva4qrRvcq+SVCzgqR4LNcqSzxWYOKs3gs5Z5VXHsW7PPsXghlK9UO/1Nht5qyYHWLhFPa6UHzGtfMyukYBP8l4ccntTWQgHwId3gqeGu+TmYd0B8O013knPANRhunCXq04iGTEQ5IObq5bAcyFZo9JVmMCrOH0rxH8FXyh3qreLllNkjeqGTuVHcGqzzuVJTjpK8EcUSJbATzV2jcvFKrNdxVXE79tlbtQCiQo00IRMMVlDaEe4ot5QUtHbu2EqX66PRPJmMBgZRMeRFCoSiCICOExrzVJb/pKpImcF4J3kL2B6SrMlhGU3Woe1RixP1ubEiBhAK8w71Vh3uKzZO9UdIGhUmcGL2/pQ+XNoYisFSRxcsmUwL2B6K8XgFWe/iqzXfUqnbZW7GANcXdFgLSHdFie2mlYqVEcMa9jyj4msIBFpq0CKlvDcMTAgKYzABhFIbaJziSawWlql9xgjtbpTimHqE3ucjtitGzQfXd6l4jIacIpReKPRCu8+ivCmeZZOrne5Ukt4q0seivFhoC/iHqs9/wBRUXPjpPYsrK3ZgF5CIjCMUwsmB4ccMU8MmEzGCJEFKMzEXTbQNk6XeG2WHWxBT+paFqk01NorWpfWvmWrP6iHmTx37Zg5iqZ3sTvwP/NEdWdhneVKPUJ3c5buxpapZ6FP7jFDR2HtTT1UxA+thfoqrvV46FbbBsSe4LC4ODuhCxvluDeqxtAgbYjdFrhAi42z5zo5IyU8TG4gGrWXlkWscQ1nJarNawMbMOU0KdILBkgFsB2JZ/EFjeYNdL/NPhZsyI4xTh90v81J/A8DzwWlu0HoV7zPzQ/BM/8AsnDrLWrn7Xw/JHvAO17o2CkTvuoVrLd/mUl3UJ479soKSehU8b1Ld2JZ6hO7nJ46tTD2I9ygY0ROE1Qydl1nK9fXymutiWtOGe4Cu5ak8vaZ0ajnZa1KdVpA+C1N/wBpZ/JRhnN2z2f6spp/CFP/ABHEpXVkwD/qTvxS/gU9vRx2FxAIHVecFSXaVNd90Vq7vuaQtYH2OJ/NSndx7Grv6iHmWtt6ElSXdWlTvwTI/mmO6t2uHVqZ+B/5p3exauehgnbZawi4MU4E0hCKYwOBhsseCzSgMIpaKjEVWLHwWVMWd59lGqgWbsus5X/QyndHBO/FL+B/xUqe2Y1wEwAgcuSd+KV8CpoHsOd5nKS/SNs0dwWtmMDjwxQYHFwcz4LW2/Y9xHxUh33NcFN97ZAAKBheNlq79HwUnVh0i5ak/vHwWsy/uEfMpD9Hw7Gru+1w/kp7fuaCtVeK1/Ja3J5kfkpOKjoVG0P4pzJeJ2J0bWQd5J/lAILC6TERii4gCPesp7QqzPMsqcTvUL06q3mXhxGhZLILNXJZyzlfbZW/Tx6KS7q1w+BWuNAzXuI+KkO+5rh+a16X3nzhau/R8NsOrSpkryzZcZhcYqTMxVzR+KK1tn3QPmWpTD1HwTj1APYlDo8f/JF4LQLBf0+MCZKfz7ijXILYF3emSGTA+vLZSW7gvCcjI8kIRuXLA6ZLHfzUG6xhHQBYjOdHqovmk6XoChHXFFUYPoWTKPBUledZggoA7yF4iq88Vndu/aj2h6uIv29K1Kb3iO8QWss+5rXfktRmn7hHhBTmfcxp/JQPsOw/9W2Ue9OIgYgLVi148owg4Yp08TMpzYYIJkqdLmHAYgtCLxq7wLCi8KGkr2B6SrNZwWD+pfh6AJomaxNJd1esp7d8xWYd0Vks4MTcDD32VJXEqjGBZwGgJrnGLm84qsx31Kp227VvUd3ZIKcOnboCrbIevbJaT5ZsIQHQovZqc7yxELUXk/6QzG3GKkF/UYQx+lBs2ZKDe5H/AHhtLwaqzncFlPJ0vWdL3vigG6u3CWxxhiyWO3NWTKfxVJI4pr4NbhXiQ0BVnvVZjjvUA7zKPPZb1LTEV7cs/wCreod7p2UVAVmFRpxRqFdXX+K5KyoFRvnXJXVdl+3BZU9x0NWU9/GCy8PpTF/kfFZLR6MtTIsyRm1ESsmQd7lkyWcVQMHoqHlIbgjGc6tTArKeTpPYt6uYTHJA+KbgEAY8+nbYQYmIjw7YbGLqCCox3BeGVYcVAvaFn+ZVc5f4qmCK5bgrFQwlWCuFnrOKqrhXXNWKzQuXrKzpn1Kro6dtlQDbdXOyLWxrDeplWt8nnYnQ7OsRGU1kRxTcAg10tp9ROb1lFMf3/Edmkt/BeE5NklrW6XXgquaFWbwCJxPPcF//AEqiXvKoWbggQXQ6QVGOVJY4r2Qs/gFnPXtcV7PFZw3dnks5VOzerbb7DX1rS0CDnERJTpb84eonfgfLf51rEiYCWzZgAhpTmdDDsTG/dKcFqz//AA4cD2KS3n0V4LlmgaXKr2BRE6HKjVgMydBhhAhVDjpcqtl7yqGUNAVCdzVRj1SVxKB8nLiLHos9o3LxSs9/FUbHSvYG9Z3AFVc76UTlcUckU/EofL4IHHw5LKcbdVlXiqNgqNQHII7Cs7ZuVkVy2c1/j68GUTjE+Ah3tUzug3gPUawxzgMcumlOnBkx5fSjLUH5hPeNXfAuJgQvDhpcqmWN6rOG5qiJ0yPchiE2nJxWY30nKhkBUdwaoBsw+ZANkup1cqS2DersHorx+EFF0yZxKjCOkrOljes+OgEoDLPorE4OwGyDmk4T17LYiNCEcLLhHJvSiLsNTVOwmkIlGJsEXEi+wRsjEHuojkQqhVtO9Z3AInbYdiqPZgrc/V3CLXtefmNcIMJXy2Tpg+5zMNV4UNJV5Y9JVnt+lVnO3BV8od6iZY9Jy/4dvBUmN9EKIMw9waqSX8QqSG73L/LG5eLDQFWe/iqucdJWbsynQPMBhMEPEvCwClvLHkPtFya0ShlGESSU0jyYy8OYEY6zX8MKhTcoE0wZROxhDTSERyUWS/axdVHyd6wwoMhkxEAiDdr+yKRwmME3IER1hVHwxWIylR3X2VEFys76lmjeoiA3LOKv2TQ8FmlWVSFnKrir+dUgreZUajS2wI9i4rdQ2tAeHtc0OBhDZN8v5OkIF6pNlbk5gmTRHmxpVJU08Fk6vxcqS5Y868RrdDUfnv3Krpu8lYiK0uoNdLBTQ10cRuGkrCyeC82GEiPqZvkxk4oxh1CfQjC6JgLc0ZbjmQoTsdlh0G4tK8SkbEgRpFNLjHKOIAxovlS34KeymB0nKFzEK8sZUc9N+Y2LRDNJQy37mgIwjW5cm1GVbaIobRUXRUYHgsgGBWEgAnvVXBRx+ZVcVdp0uVhwVGmGhQwHis0K4Czys4qytssrI9vR2Gl3tYqQ6HaQ2FLkrxe6ksoMfKmYowuEWmRUGFXoTRLlhuPDUR3qZFwaWMDyGsATh/UuxCZDP5UXiYmYo1iadFKDB8xoyjC6xObEQtFA+SEWxMTyivLGUWjHE0oKqYPxH1BeJjQX4cQcDyTj5e8I4ZV0Xh09xF80LCZH/uKkmVvEUAMDYn2WBREyZfrCCq48djweRjZO512UQHk5hh0bZeGV7I3qPlG8FlTHU/CqvPFXb9SycIPXDFZLHcFgwOtclBoaKdVGLRuVZpWc7irK201sjEq6HnVjxWaFYcFdX7VSuazSrAb1nNWevaUXuLj3mO2cftLH+dYBKpixZp64kx7WQx5kGwt086xPMSea8riyI4cMVKmOfSYbwt/qCdim2YDQ8UcvEzJs6PWP5KdGXGYcwy5ZgE1zpJh3wTmzRKi9gacc1OxzWhkwguDATbonPhCJRdhoBi3ItdcbHEuc7C6FOf8AqKc0WB2NgBUNNk/ZMxEQw9VGXF1OQVJT+C8OGkp0uMoW9qJVZo4Ksx6NTHvfCKr5KOmKyQNzFksedyEJLqGOcqNYFntGgKs8qr3HerLNXJUaeCyqBZ0D3rPHBZxO5UY8rwuK/wAsLxRuCu87lAYo9/q7bXnnFZyIdNcHDkqlx3okMyjQR7T2udhD2YcXRPcH6qA648pHloTf94ZFsKtkmtFH5vota1YGsm4e+bD4KAkMh+IlyyZclp6tlhYzPfHCHQbAIsEx8IfeSrJ/dA/FNNaOh3c9kHOb4cCNEf5rHKluqBGA5qkl/BVkNESDlP6f9kTGW0HviqzuDUB5SeQaUgKKL4k/imL/ACOMVkQ9FiGTMcRzhBZMg73KjJYWe0aGqs925Ve871ZWVFRruCzeJVZkv6lWcNzSVnPO4LJkzHKmrQ95f5LOCrrLfRQHlnmJ6LNed6DRLFerkWgMEPwIZXJCLjfqq/cnx5FOIN7IG9IFAw9VYqyzgs5OoarNQcCAQvH4LKmOcuazfU0lvOhpVJEzgsHkWg4YRc//AF1WKY6U2kKRWVP4NXizd1FGYH1rlzFD5HxUJbw0/hlqjZp3LJkH0nIQky6WjVZ7W6GqusOVZjzpcrKyADLjFuUIQysKdXNcGlEeUiYRvp/kpeXAFkSb1We87gFk6vNfpP8AJU1T6v8AFf8ADyuCJOttg2+Cqh5adM7mtTniVNcG3iQFSQN7ynTBLlDD+FBpdQ9ydjmv5e0o4C81i7oo469MKbiLYQbx5oPaedU6DTfoo+TO9YsUttIVcqzmkwWe47lHC4714YjHmrNG5Z11clWKsrtG9Z4XtHQF4blmNGkrPljQvFO4L2yszzqjW7M4+qdQlkJbm16mqgyWJZEQ4C19jI2xBFhe0Ecg1U8o7Q1ZMhx0lQ/p5e8xV2DQ1V1hyypzz6SsrK0Vkynn0SvDO+AWVOkt0zFla0z0Wkqs2Y7Q0D4rI1edM9L+SyP2/wCuP5qsvVpOnCF/FyG5OGmUsX9TNdA4jgllRw60/JxVIFFjGqttigZtYdYLyjZEkHHDNjyVHw0NAUx5nTItI59UZ0Y5BIaT/rnsmDrLcnF5gC2CORNMCS3CLxWFssge4sOFjWc8RFU1xnS6GNDFEjWHCP2sQIM04+UYLwRveiPJS7GFFnMYNwWVrQ3FQxYhivuXJCio1mmCzuCyyesV7SoPOh82HdBZ0wrw+JVJbVyG5ZxVz+ilsLxjMoHzKMp7XOc9zjhPLltM4CLJsHNO5ZMl59ArwnDTAL5kyUz3poWXrcv0QXKs6Y73ZcPiqS5z9LwFk6q30nkqkmQP+WoeUI0ABVmvPpFBhN6kqMnU3vbYF86EViGpyGtwF2UI2TJUsy5cT7LAmFutzsBdgPLlFTXlxcQ6AxTIqS57QWva0wOhTTggMiAEASQVTWMAbNLqA5aawSyRlUHKNkwjVphmtZgDuSmMeA2rSMRC8eT9UU5o1og2OBkVD554BFzZDnEGEC9Rl6k0aQrS5Q3BMg85lYFRL46U8ExBYSYKmrk+89ZOryhuiqljXA6FWY3dVRDsR0Q20KzlUk/q/wCXbhLmuaO4qs6YfTKia+plR6wTJc3VpznSXRbgHxX8MYZWIOpdS2vny2YM0OmCiaP6yUHtygJbeagZ81wjGDWQHnTB5GY/C3CIv/knn+jAgwuGKJislspnuy14zt1FLdO1gsBZ0jGBXiTXaGwXy5UzFyLnJ5YwuaTiBHOKq3D7zgE6ExuN0IYDGCrMefS2QLYwtWC8OXwisJOT0Ah/Y77HERMTz2xgYHu/QQM98PfWquj7HPrHZKd5N0A68FhlyJFKYi2JKo4N91oXz3vewgtO9eJOdoYAqS5jvemQ+CbQNa0QAG2HLp+vsrbb+pyP2x5995X8Hqsv3l8zX9Wk6IKUX6z5eTN4FOkMETiICmHD4ecmS/KDKbiBAv3Ig3HZpKmHQ0qPkyNJAWVPkD/mLK1tsfwsJWT/AFMz3WBZH7fPd3vfBU1LV2e+YqutapJ7mgJ7A9k0YoxLY8F4sNAAWXNe7S7+322XCvssiXa68neiHxxC8UTSKk/hmEfFGdJlONnAwpZPxlksPqYuA7k0v1+WMIgMLifgv4pzvdlLJka2/dBU/bD6c1eDqUrSsr90kt9wBfM/cNYme6CvCnv7yVkagz03RXy5Ehmhi8WGgLKnP+pVMdP6W3reSvwXtLMKzQrBVFezSCuqnZmqgV+18vUZh0rGdWEv0l82fIZpcsDv3JuCMcLQoO1jWpg6QWTqcxx/E9ZGoSBpqsgS2aGKs9w0QCyp7j6avssrDZf19tt/W5pWbsuuasuSwuG3lsiLq22xWaVWHFZ4WcVYrMXILCLoEu+zzqsfb8y5wxAX7lY2jfvWVrMzispz3aSs1WVguSur+usrbb7LLl6iqos1W21jBUEVyV9uFyt2YGhVBsuqlH7uRUuEtscESe9ZMFnKru2X9xQjQZHmRyvZmfGi8QZ7Vn+y74+tsrbb7aedXGzntvtvssrbeasuSH2qKsrKw2YeXYzV0QY8V6q+yysowt2pZ0jzrf6mA7HLsWVttXgaVDED3hXCuNv+HYv2bHsZSzVyV9llhPawOpHmrK2zOV1hdoVlbaxDsFDR2R77tlwrqyttuNllbs5+V0JEFV7fivlNG9i5rwm7yuQV1fZZW9ZZWGyPMLv22Wao81Aq+yyssXMIQ7L+y3T2XaENHZMotqJjjFW2WVtl/U39bbbnLOVtkBfYCLHZbZdBwNFiIVtsU8dlyGjsu0dlulDsO0IaOwaonqdtv0Ntt+1dUY86GlUkPVQxul6+ZrUlvnUG63jP4Qi8OJhWqOGgjRDsntej2Sm+6Oy7R2W+8m7auCIa6JKg8FZLFRoWfBZbz+kuoCuhUkzD6BVNXeqhjdL18zWZLfOsvXm+i1VnT37oKmrTX6XL5X7czeFkSZbPRXi4dFFl635yoOnOd6KgHTL9wU1idDpsOnslBR7Hfh7JQ0Dsvqqqrgs8KgcUMIhBAUWeqvPH119lu38zX27gq61MdoWZOdvKydQj7y+VqckLJaxu5H5vAKs5/FTS6Y8uYRSKxQppV2nzqnwWcVnHjtDThj1CcyaB5PDz6rzo95cn6Co96dp7JQ0dnd2XVqoPOUqAqjFRoV4LFiMVV7jv/QH11lDCbwXLn5kWl1sJp3ogZ0HDeFiDcnJdxoh3fkYFDuosHKY3CoFU8yox59FZhWU6WNL14zN1VV53Bf5h4KHknH01SWBpJKZMlGI5jon4nQonUR0o9hxQgrqpVXhfyXlWjcqS/OqABZ6q8/2aHWQQnn3HIf8AqEcUyFzJI3tWJxs9rtxosIPsuZTTkpxc10CvCcT3zEHMksiOtVGIGhqrOPwWc93EqkiYfRXh4fecAsvWNXb6cVla39EsrOnu4BZOqk+9NKydXkj0YrJOHQFlElQ6ojZnDirqjSi0NhFYWvICrMdxVT/bZdHUa4GnBVofJhlTzRgW1cHUrZZLZvM5sL3UTJdpJCyjKGl6rrUsaBFV1mYdACzJr9Lv5LJ1OWfeqvlyZLNDF4kNCypzuKq71MRQqrj/AHSmpg+8sjVZYVMLVWaqzCqk/wCzHJXXNW/2BuFdc1b9Lf8As1tn/8QAKRAAAgECBgEEAwEBAQAAAAAAAQARITFBUWFxEIGRwaGxIPDR4TDxUP/aAAgBAQABPyGeOuIYYYZMPRgZh2GU1OCJjNHYzy5LU4JLJa/+R1xswWGGGGHHvsMuCQFk8Wc51GubX/yZ48tciwcmTLR3u8pAYlAUAYf+JP8Ar2046Phg5Fg5Og7DPN3u8sWLHJhk04lkJUlDP1g5F1CFbPl1+dzw8MZ/jj/pF6NyyCnl6H0p9u/tP+M81yYOjB0Y14I1LA1YUDJpkzwlnhLLLLLLXiWDkfCDfqdW7bcuoXbmB0HUOnSCdJty0w7CyGAuhbB1vjiE5Ce2f+nAilHQCCwXukZ+GE4UzmbfSOIYYYY4pxGh8MHMyW0z0dzvYZl3GMjAyD1xLPE/4Tz4RbE2CC24GZvcLRZ+bm9IdS24lpNupAHvpMWdpGxJcXS1lcwHuWWQaeQ8OozzM8T9ZbpVA93GuLTga5PefIjUxF+dIeWeYd7u9mGZYAzafhaZB6DsQbJkyf8AONGmY8okqCdm7Hu2bvEMJrHdi7X9SJKTPdJaqglzOW8GoUYyvhmaZ716OK7lAb7Onqln41/6nkd9WeANl+ABlv5mTiS0y/2jVIzS2eSClxSHMk8Fm5yBRh4PCRBhAlJ/zg5PY8tMwjJ2oin6rsg0otyHqwijYkn7h/lITMjVPW6p5AA3O/kEIFHtLBBAZmXqh0dMnF2TfpMdkx6pd9wLWkm/nYMWJ1IxFg+Xqzj1KEmwNoDJc/dugdyxoOJ+g2FBzKXAVMRl9yIBDc3oOB0/zMKwbZJlAEgJxdsxQANeBAWnOJyQFEpSk1KVU2jV98zSGmY8t1eyXy90BPnh6oi8dIH8I2fXMUupuU3z6J8vv/EPExvDrbT8iZfKP7Dlero+0Z4CMYPcH9A/kUdtkD3blCZfoODexhJ7k3JJkyanVjT2ZOf0njAlUvKUA303p9RBGGDyugghI43RrqWI+pQU5DwS1jWff+/ajAQgjWIGjALNnDrEZAG5dVSx9qMY2DFf9R4TSeGG3wwwJL1hAyWDBiunBBAGDfc0oITch4IGeFSeIPvP8LLTzh9E73Q9XAgfdl6AkfzCgdg1P5F/BS3crbD0SdV2HwjIG6paZDwilqMnXgHNdgSSiATwe4ny3wPE0+hU2aJCAIMI8OHdaxNZT6ipq85iz5a2s+m6rwp/Oj6AwkITiaMDgMnI1JFGGWD2gE2BOyD2N2QU08bstyjKYzUVUYYM4AIzeKGM8V5LHeSlMLDpGcEPFI4IcP3pwQM2B0z3NOY/KQMZ9scehxbEmyUmbscTaYtWihEHVlRk8tPyHPgKsnMsE/cgxBDOJA7p7sqhG8UH7QfQBImyohKbYCVMf+hQFi5J/G32k7AD3XqjP1jmkp9QHdiTArtVFsTY23dkELRls22OqJHCJ8BJaQVMAs5o9O9X6Dcme6FdQZiQ0RFKyZYp8JB5GTMtDJzDdE2EgAxRbInDBsEkFWk/VMYjPDR4mkM9GWbuKCiQCH0lkQhmkQEpySQSQIDMhMpEGE/YBETTI1fyhup4FNZHIIIwgzDRFWEtJNQVwEDxJZqoFeEQE/WDMjE4APiW1OmprIsBtxGjbIduOCFHkMowyZAgCDqjRX2QaaDfE+qCrul+/RQfov7Rjm2BvTcedd1Bibk3nREyFtDjHtZXsl6WByuw04lshJbNtGbr2m4Fy92LMLRxoLbwazrMnMsfZOSTQQLtViMSQuEhnLITnK4PIAzaUgwAY+mo4uhIMEGhQg681GMyaxY8BhOthMIVD7QYsUgi/wBQpnC9QSJOdXz/ACUck6YU2IOSNmHWR2peBsvVuA3GdHVSUcu0h6vSSEaWyBvHjvgIukqXUW8PsdA601v0iKT2VbmNq+pLOH+GCcKpqSWydX9JNrHYfhhBuV3L9pkmXerAO5xoiy2O0yzdrIKsscx3abOI1RuhIicC4CaG3JJxxjJGMI0tAAcWj6CwAHCJg04LMRBza7AFRaMiC/io7zgokYaTIVSIvEo2EHAcX0OFKTcmAmxFkUDP1Wjp9jovj+2WzD6AUYwRgRBMGd1kJVApoAfdKKPbG4A/41RqDaOdTKS/G/pw9tU0ngom3k5/uRmq8pHbac2cjkcLSM+I6dZ1CyUggSTQBmkIy4IQ4D8AiDZGG/EQBakwiwolqVUocxyF4MnlBZJf5bkhILcCzyxDv+ETGsfyl6MTZ/2xwWfsPlrWYxH5MICwtfKEiDhTkIOYXywI9r95aE5ogBUhMGoQYILjlBTQHpxgMEz4BFTGbKhwllz3Q2GRkNeYH1wQQEUS3/TGEZBAJSAGJECVrQk10lVwt7CGxEGCdBoaVhM6wKAPh1L8QATeQow86CYMstTZjcQJLVhsBOMooptEXCgFhafSEjDTmxIP6+mhx/dF6PJ1CKpSYbRhAwoD4/psTGc2SMDk+086fh900C8fH/SUcH+KAgjC9iQ65GfuhG/gfzkbhkjFMBZFplRGYbn5I5EOJ8F0oPkdm9GssMejStf4RnOD6CueA2AzvdFkMki8cjNjBnUwhDEFSRASpULg0NAC0l2x25gBEhmxKyJo/UINIlqRDJwKrQmEZbt+rqvoip8iPw0aKzhGiv1ZmkzAORhHsiL0/uMGNATOcU/XMCNZJpuojI+q1vgecpmb6IgnAyfw7YgEQPdhHQo4OASWiTTtIwDYgJ8Fr6kofDDhJbwWg7/CMJ1wevOB2aDNDeUvRg/8DJYIggWfBZAYuT3fsghfgfoEAqrw/BsyLHqlGs+lIQdE+3BsUYPP5DUxRwB3lBQBCWCWYBxjgWR+zOxuGzFku1Jnp5zBDUQsF0EGaB/oTEIIxcgUkwASfIy3JIm5l3JhAFymCbQx9qCQZHBSEkmYY0/6oRdIjjs/R1wDiEIFyChJSpw8jGzh8B53uf3LjKg+z1TkxmuZIHGAD2JxqB8Fi+72HAVT5rnKMhrqC42TBBJQxhT8Hu1jcDJ8HQp8oeiZLcEcDOXagwHyASNiABgag2zEAIjDQnoW4hMqwoiClxvUmgfA4CJRNNqBBTj5JwEhQaoH9SOAihaQY4ibkzTYCdiLRmkoTZmmKWo04AeUkwHpJ8mwcwizSMGTGdpzQihGnVnmyzSgEmAkR9Z+1OWyXCiIJAJYGCSad6vDsv4hs1nAiHQdNv5qhHS6Uy296jiK5TfDLplJ6z+mdhhIRkMxuAPcPRCDVIz3F/GO/wCc2a0rE8KipskpTFEbZSheCJaBP7SBcSnAEVMCpyDcT3bF8aZISlcXlNbgIjcEWscNRzMIBTonxImppAkyQcWe7lBsDm3bnsfJF4UoJ7kNmBnkWyNMSO5YF3HSRGwSbNkp+lRUCEAQlU4J5lngUXTr/kMngLFExU2SGNHCo4CUY2MoU+c+p0t5gH0Jbqh7J+BTP6OogVaQ5rtFvsW+gxjx6IZ7OrlKGUluIGMkJUUwtNjIYckADGgTt+xCCCfydOEmxFp6FUwgm4zAFyjCCi1t5Fw/TUKDgGg3BOiqX8ATxKSfSdFG+yXk/skEZkOtWMjoMcHoAZaJzEnq1SAAkhNRIv8A4GJEUEmjh9IkRIIt2koKShyMMMMMgBAN3JSyQVjSSSuAYwCZRofWgQEXqg0uzq4sUsyBQkDtJOJSkkCoEScDmZ/m7IoM5sTkFBTQZbIqUMxO6YgByUSjHuh3uwBi+LAg25CC/wBgc2SPWbYYlVuCTZ7n+mbClAExXOtXD+gKKPuIQ3nD/aengDNn6SUpElc5tKIacDPIcWsycyzxjwfJBlwMT6/a6Wqx1+BxLhyQhkUYY3t2j4I+e0GwgIzaNJTNc0dZ+GC5FiugkO0ukiNVhHMmq0Qck6CeYp4EAKOon6VCJRIDMSQJyfZgg3c7irqDd/buVKYx2xgwBm0aC/ALcy1fVf0yEp5AHowoSdpk9NL35LDl4ZEWLQiCRqeCenBrOp9zn1WmVBZqIGDK77TLHkNqafT7mQAaAZE+hReDsi09lxYN2IhERMXaNfFVrR03592YSDBJlFlWpNY/SOmoxlpx3EpygbJGLpkRK5A9lP7m/wAMMg2BdMAAQ7pIC1uSyJEjZCaAWjZND/igTdNQ25o3PclAP+JJzSCyckuTOi0LykpJJjvxKAEac1g1kHQVIa/r6l+hD5YknwgjriPqKutWu1W6ZmY2CfTgBN7oEmBXarcx3bB7AZMamYEsO0/1o8AmVGLQVblJ3dmHY3Ap3kKJwiEZfUoh9UETh1SnDkkxIk9xDVERchupNfIKJsME2kXdRmcUQRJqRm0zomyYEhYJzSrYgDVEFszp1JmmBemiCahdg58qtyTZBoG7/gEomwiqBGAJAk9IoACwYMsVT9jFG3wBJn/CYi71cSp/AwwxwOZvQzL8zthNL0e6vsoE2/tgN624+uolryoOjO7JWOEAeEAxuiHBHuYZBrAiLQyzqhk1I6dFLE0uElEfAdy64CTcndMBO4L9uYTZEWrB2mXEjSHygKDAzASyFVlMkbpBpDmTLyBi0BZMMt55dMCurAxKFItikiRoHBkREASUIGvFrpLdIUmSihWhObmXyZpAgwddLM6gFdWMk2Jlj7cR3LaGenhJk1/wHJYIsDwhMbERWDMEpHwzxdhhiL0aZoNYFBQaBAuuGqWQ/quU3btgkWTefRwHSDlmiGh3MgQfhn18p8tRqERLmPfajYYU+yFC/wA3CLlKr+XgR0nObQEgn8alAPgKLTIcGBBiTaFr3aOXiIEXCEHiWlwIS34u21CNSxm6RBMKRtq5RwkRuLdp/FcJQokIhywkwcE2FFnccCYK8TMEsEQQJqNEiSKQmBKGqBWEkJJATgQutBQRBOTAUwNPAzOMJM4nilwNKRZlgpMCoPAAFi0NQsIO30xALEX5xQkUHVn+h09ccJkTyplDiu+h2lX7Q+iMMbH+0EV50Q3f4aK0Nw+qasCa1J9Qf4QWDA4Q+XH3cD64H6SLDvn1TdsMsN1u0PhOB2wpdB4aRQQ1YKEbkokJGLNsKfKPL00PwEPXBQyUNS5kRQAMT7JnaKYGKCLaSgiKBR3t8bMBHdEaIAocRgSg1ED/AI7uJiIIgTfCjF7kAAAJkj1RNxAOlPol1qXVBCUciCQScJMTyAispBBDNFDNzJagWIsAw2qXJu8NTH3FhKgYMCk7ElyO5aZD6CYCSRggb9aD5dy1RBmyCxHoIhnYGiSYIOuvYUlwzEX7GMRF3ByNUJ45LUUZ8Xf2EQIiQKibaOFOhyAJrewdOkWTGlAChUvmijDcOARFEbMdQcTD1fyX7JM9jK9Kn1RIjdPQMnKlYkZfrrBCGZBAxcrognWfSCsknSykuJJZZ/aSKi4qHRbScEWLl+WES/Es4xvUIoYIde2SgoIwMUwK6BNWM7BEK4VYsmEzYoFuks04IVCsVTOBJMGQZnHZomIRDOE4URM2zIyn6YcoQMsnPdBFcgmSTFrJgMijgQGE0QgjVjUAYFgcEsg1FBSrVyizROclIqylRda6Iug+7ljoqPFi8gMlUCwSjg50myDKwAQhoCDol2D237q8BJ7sZ3L2zmFiwukBOc8cIYgVEQD9hdKU1iGLM/vEsj4Z6XwOECBw1dUrAi9wBNmIIEybvWYudaIBE4zoCSlmTik9GIr5y3wPk5zTxAyJOzYiASAzjTcunrArcg9DVLzEClrFfdJSTwIQxBHuEQTBxHJ/CWamPAQJD1dF/n++CEA5MEHKBgYSFib2snM6oIBUiYObHqy1YMzPwGyhCgkP3KZGoASBilLCIHSDKM24ncy0yHhlwRB1QkBnEka14kUASdKpJRBGDkEHp5yAgor2MUIBFrmAb2Rgbo3cQm+LvJHRaKGNMRtBKYSTC6dZ7IsCKGIRHwk5zLsYsDpATFY+EwFhTZjoSIKQVUaGU6trM2cxusruJLIWDsjnmS5Hv7G1AcoQBtPYILP3KAmm+Uhg7NGLoM5yQeJok1HfCWORJHDZmyhxg3vy6Z5KdEFBirdTGjCrFFCM2w6TpZNOBgNU0mDJzRSmNNgJk+xsFTixqgVwEYFsJwJSf4zIMKQRiWlhF7WAct5Y1NhDNElEJofXRkh9dxny9mDoXoMuB2akOQiIU90a0ksAlF3Gzw7L+zArSQY3ALByYcCWKqa28oBVgZkzP8f1j/KY+LTFkyiYB+BAPhsBuOgEys0LRkC4Wrh7rTYADPwATH4T/dK8WUX7Gj8hiRaSZzSG0A6AoFKVW7GJKLGxAbBfqItPwgCDfieyCWhuY7k/TMGvdOEdt+yJGif5tY0JSKDnVmIiAVhEUkmp8TUH311I+vKasGAaloCRqxVkRVkHIIJ8JqsgmzwwWP8AyJOmAkzk02lEQA9UyOEZi86IHg+MC7KRwcpEWNHRX4BoUqYEY7mOjAiYeAjcioFMaHVYh6DBvDBhhWD+NjERB0k6n5fx+W1hOiFQCM+umJwSYf56sdVppB+ieJcQU/6QZQF+HRhiAzAklFF7wMlN3+YH9azH86bOGbYRCDGBE6Bm1fdoVIbA9Ung3C0MIfoANa3In0DPZ3D6lx828kjtNAJ+AgmnQUMfJTLdDMAzm5RJi1E6NUdoemDAmABDNy6EAkKhm3YSQgEQIxTOCwaJugmyMQaoZBACpJEf43sz/qTfQJM1LORrN0yv7WZgCQGCFAK2GQymqw2ML3zOQ+3IDspjmUk4yzwrxHl91peiBHkQ+XA6msxinZF4niWvqnNn89Wtkm8WIDPVQaQdapt0xmQSGAwgzN0mvGgHMyGwG4pQRtFHwzgNCG6hdE3QGXeRhUdvdC5pVCKAykdY2wM4r7hJTCnQAGCT+LslGllQh8P5BalNYk9DUhjv6kkVOlIn1afGmpDwA3QM36lvo6AEH5ER44oztz6CgDBkdDo3ow8tqSbSwCG3L5TDgnFnV6GrKsHQ0LEzROxNCUHRKtkQiSibKEKAmgYL7KPykwHH8WQISBUKiUQtsmAGJUEJu+5LLbxO33LLHfIjv0AlGEwCNi7mGH1Wxi2KWGJFOKd8sVvN6F06gGwCTXS967sMmXJDCaGdGfl2AM5gRm4EAR02SpM1c7hNmaDPIbC6z5Y/isIJQTNepEvRPtYDOVPM27ExyGSgAjaDi+0kZkmR7vUc7hgH0Rjh+eUQn4e1Ik7ow+DPINSP0MsABoTI9WHJEAXSgaQ1MDYUDneExTrVGHEWWVYPJ/AYvGHqsXBH5izZyhtihEszM0rCvhWKX5LP0ZyJYjXCyeAAVc4le3IaZgD5LShpnClnVph9AhH2Rnuknqw6crAGM2MPYFthM2qN2CR3hAP56UigzUIQjQeCNeVDeKJwAaN0uXHYA1FRMITonOLoBIYs4EqmHYWuK9qxYiuQd6uT1I3DG6J2xpzHGLbkQZJJ5KKGAwij6hNxP1DSmaklVZa3Z4oxoDUGifcIiQGhECTE/BUsPh/QSyY/DVg3mm+sNU/Imgc4/wAsJ9Pifl/MkbI3zzUmxKHJgCS63gJ6AMEVASQ8wqbtDEUjAJzi3EzICIzdh3Xk4UJYYAgEYfRwmgV0ogWbuK6YSZw8VQLy0VZrPLTikREbTXFOhDErQ4oAkAhJwE3sG3gKX3NJRiwoMctSMxtZAsTAlJ9yjfGfuYjTyoQTJBtskeF2FBHBoosQmvMCQe9IGoxMGmDFvD+w3oYQwMwKXMjSm+MuvG1H3PDP2hho04ln7V4jmGeRdJnSSGkoIidnXIt7nbkvMmFB9x5CEqDiaopaiTNz9zoUA+8CPVn+Ni1ZijMYJ4ROAEQMicbRLE3HIh7Easx2ccJLEmegN6ptwAQBICGn8wrgjNHl8CfdopGNvwaZkDVKQGyB9v8AybNuttOwY6MkoFV2MUfwF0c0EysMzL7nBJM1NTrVMEevOcJ2SZ90/kUqBBVhB9KsMMMMMfWPrDDDDDsZZM2bDNgcWVDAOhykaoCIUgIgH2TMTDOo8pEmCwSQB/3gnBkAgVIklOyBMbFZRekTojAwgkjAAxrsz6JS3ocB+iZcAImwDBmwfyRVPmN6AkgGVjftnilmdyj0GpYLHJAY0YP+uLCCNg6DKbh1l1GDEMi6oulk2AdV3HswYGHEtGnAztv4WPIC0CR7lPjIf6hiGpDiLGnaEdjFzf8AAkzGKY4hkaKuYFkNijLIJBBw5IIuIQJ4HERJ+WKlo9TfAYaDWprAftHQBzHpRVL/AD1LLjLf0zIN4BRk3KJRAIPzKIggEcCEcwxwiOOnplmf8YLBYYdjLLilmGjF12MrIYOkMskruTOfEf4g9i8Oh7sxdPxhjWWQwoSC1BQPlupEAco6EAGCc7+0t5dCkWQReo8absG7NIUA6OONyNJ8liJfKAewRw80/jGmRoEj5aXT+iSRBTYN9PyYlEsdxViTcT9CHIYa2X4fDWJ2qWAMfAYGLRpx24/4VyYLDDDDNaDKakBpxYMZGQMuYkiTwj8lAZhuWpafJjAC6arH3KDWEklfZTAERA9NWCCYFLVBDUpYgwLBmXBA6BKJs/HDC4Z1LGhLKjuoRWk4JIVRBhVzTZPqhiABZAe/EasW35YJghbHFge/UTGMCdRKQWl/MeBPQdJJiZP+EMHhDTgFndB1hwwzPFE8GRowwL3ZWNCQiN2mbp6MliNotgIKinM/9KJWAJaIDmkaoEJABCBgCBAyRDAI6OUIZ3axmgqnidEc8G6iLjd1sGLF7cEB3wksJq+JT4rlAGdkZEQMeajQSLWnYoYDIc7ob+RpD4Q0aIUsf8NO7y6G0fBJsSTGpeWfvDLjDAzYCNZBUCYIvOYrf88eg24CTqjQkjgyoObQ0XOQnZySQa/udEyiDTYIBVJYTEQNgQGIMsJJ2YqkbgGCGASQckwETITMJDZFRQQc2SbsAbpY+kIHciF2TiT1hUYsm9KtyfLDVgDB6DVrwWCmgNyIYBHVr0uTCNLjX5A5Fg3tVgjGQL0jvDiZYzcOMeCGHtpmwg8yOMCCfRtQrr9sWCQERM40IUEVzOgRlKvD3YlgwUd/dADICvgUGxphA34oOJo6nwlYIFj5IylEzBMxsgiFZSyisLoQhCQGAIliKZoWvNJnig7k1kSCRDUjSWCMZeIJKNmRgrMAE1IgfFMIAEmUlD1dkrFCGANOEnJqwZZhhm0Idd10ST6JLdU46ZsaLa2EUhvs0lTzQkfYCQxJJun+YTgx5QLXqU4E9AEjA+UnpTtMF2Tm4IRxGCgJgguIQS5MsMJEGzSJAdsVwCMVAWbKBEMJ1ySBWHCrsxNmBwQhDHKEyZBkOaIPi4xEeCcs9EQDJo0UCwMCWAZiapDscZM2qvg1FFHjFFWk5D92cic2dz8zHciwZt2RgDJYNcwO2mLa5dce3QKNpM8WNWQjH2Q4mGMF+z71QSgCDBF6h92tQdQAxAgbkicAdSW/VJm5vnuwyeEBmYlnV7a81SkJZmYB0c1VLKCyEKKNABoMQRYLMsmeAROk0Y4ktIocceyCxNAr8MAsCDCACyClcI4rkVWQZLhnIFI4PdmS9sOk2W67LLFF/p4Ssi2LVJDsw7oJHXdDJ1LiyrWWLQkjJktWGBmm7luWjAdJIGyWqERqeSC2xQCwdWeIy5uzZYwYKEinD7ykFgAmyaExAT0mJUMiEC0D4ZiBziIMm9VdGeBqgWBhwDADLoqxwYgSHzWU8DbyTv5UFBQ0ZypouchWcCqelLlJRGIfW4glI5stsDCHuFsshBoGxlAmaBMmSRrxRllk8gIWGsWRrDANgGpbeEUAGZ4xYMMAwMAGGXzx/Az7uB6oMJ2SfSM/wnAIMpwYPU/CEV1UGQQWiA4MAGQSM0SkqcgSg8UmZSSlE4/lISkAKMklKXV44JKZLdskzY3JmJCKsFhF1mpS73UbAtywe0ghNjEWgIsXstvDQ6mQDQ4eUsjBJCSGITwzZPMMEscUzYMDjBI8HlEt1lU+xV+h+acD1THIC9jJXxM0/wAD+hPvZ/2lLgWlJ+E0J9A/aRg+AsZH5WQMlWoztJQIyYAyIGJbAEeClCzGRGRGrMDJyCJRlLB4MdaXgDUaOMxZBlI8j5DEAbNyWKUbrR7PFoO5AyiiyQ0koojKLtx0OlURw1R6rpwl6OOhs3Aqq6FAyQEBAooJza8RwjZIM1kMAaI5AyyeO+MKdsfJZPSw9AlbwBQ1wPq/iL7JoNjnDgaNlhxSqNAuE4tYbppLaStkGFKGFBomQrVQiakzuxY11QrERm1CHispIimGHAg0NbHon3ZYWInMCobmC3c2LUJSTEztxoQJifDChFMWP88eGA43khocyBn7AaXQ7npzDstoCSkB0SgpNSZfeILkgJQEwwPqlwkcmIkK4MpP+h4MWVNEGaiFeZTYk1AxPk4CSgwZurSjhaTjKRHApAyTEoyQEzn8QkTCcjr/AK15XR74IHY6hkEAT5PqkImMig4kD1b5X4WSlQ6zQGavM/tcw7EEDQ3h/pBETSEAtOc5RZESo4kNb5JSNIJDsb7JM4pMXdjGQ00DGEJkIfUih2JOxw25mOh7U+6CXHoGiYre3MTLA4MDJpl/jKTLBI8CXMgs8DiGG31g5c0b2CTbebF7n6aAl2HhmQFJfqRJxwIGbB9SPWyKJlURNSiQJGIqzx3S9AiqTUIEx7pYMjICbD9hRKD6FD8n9Y/Lih/LXTSd6P4cGcfiqUjUPY/hm5P4qeWKxtgyyUT0YgCZlnzdrwjy14NZ92qiCD90dQcUu0yOMki4HhDJijH+FGQywGPNNksFlzxy4QkMJAtSq1WSwXc7mLseuKsllnTgYE3dyMRYQzIYpr+QFgoyKkEEHDoYag0FG8lET+O5I5A04q+DORiJnGiZ7pQAgbpuJR6J6p7pBkhLDMntnIgjIcV4DpKZqDoJxZuSeEGP2j6SwY88mVBLLmgx9oZsGTLPhGEjRiOI574n7kd+zCUMHXx6M9dZBv6NkNWpTdbllaTfTgnMwTixqwEAPXEs6uLVBTxOrLLLLKVu4SZcIP0EBhjiOYJwdBk72OrDJ6MMU4gcEUSWWfvPN+TwE2VXNhijA4nglnirCCyLoMs/JjiDGs/gU8qB380+DsyzRxwYY4jiEB0kGjU7zwCDBAhrPFyl6cWa4J4Syynd34hiv2hhj7poyfpGTpFmjMBElfENJsScjnQMmRe+ZDW8IMBjiGHvgAkWLIbM8YQCAZscmIwQKMfUAWPEuPDvmXD6G3B+o4n6XQbFx//aAAwDAQACAAMAAAAQHUwo66yW6CA5xhhxx1ZhJNd9NZlBNFZJJdRJF+N5BJBR1915hBJxxFNJBRGGiaqmC+qS+6MchNO+/CymzyWy2KCiKOYswhN7GKuie6qBBF+yKKn2iBe5N6OR9N545/4ea+9sw99x991iqsAQzJLuCJmNI2a6qUIATlNemNlDONFmS800wzzlqhLupZkk4Cd6EB0xUohypcxVvUuxS/Uk5+mKPt/vE2FxaB1CKM/un+EPs7CXQrx6fq+1bmXCx2dOmfwNsGlwaCcaonp3e96dKw8n2FT1OwPAjlbGkYjXnkuZ+Qx90NWlciE2k7DFk0ypZNTFEfgyOmaANyBBKKiRBxXAyX/nAgmIX0uiN+uahWOB2HGUQ4LkUEn9KbFBD3nNQ+OW+aqOS/JpnT5deRZYx1+aTeKKC6xxBBr4VHrcEW3dt9HiyBxOiJxlWeiWp2VhNhqKFC59y3agPNISWKei5y93T2dsPXMQs4IfZGadt51C+zF7NdvVR22xjySD3bbFi7hNpMuWmp9N1JxyoB4O8Qfv8U0MsDVhtVllhlpR77L9hl3wa6medwtYAzbl2OeMwRZSFht0b7yx6pm8R0llpd951BWCKUA9umImlKM1wCkSW+FV9xAiyi1quGQEdAB9Rw93jPDadp5xZRu2uW+O+6+0xxv/AGy1BULMZV9MIHI1sf1XTvqugQSxnEL208ohIl0gdlvqZWgGH5VbQITUbYtS0u1qzyYmyM+nthZwEwlzmLAI444KwVAjgPpu95Ud04efmd9+4VER6E75qQdeQ1dKyXQjgvgmc+YWF59wMMK2PQIKyjDBRsehFwgujtogCVbTQSVfHSm8GCOPi5154jnCBkjgguUVVUZZYotttusCaib4FFakJZfclvvvrRVUSYfsvKS6wYQPbHMUfYWXSMBOJHBf6tdeTAipT0aBpEKhnmKWYeOXBXQf/8QAHhEAAwEAAwEBAQEAAAAAAAAAEQABECAhMDFRQEH/2gAIAQMBAT8Q4FKUpSn+sf2jBnXEoRo8hUVCEPWmJSlKU8AxjEboqLoRnWGJSnhG6OuIqKkhGy95a3Tzuo3JK2W4SsB+oXT0mYJNSnlKnBoRUVLAPSMDPzBppPbcFSyIjZt4XxKUtyIrZZkiDHXD858bMv3bkyyoqNiUsrcRvzJ/jNz4x+MvPjK6yysrLERMSlKU87sy/Ml6TG0xFYqME/XomIfmDSTcPiEI4io4nBYPO7EVJPAIj1hTl5lKU8JoSS+Jo/ugoPzJJqeN8rgqKlgR6ekzBJXDxmTToqKhEazJyKUhtPiU4GUm9GyImDMFKeUQjykSSwJg4Gkl/BKrZz6ek4JN85EIamJiM6w+B9pHpMTG1KfMI9hcKU3zCEeIRnWhGnxCEchU0sAgRpSyWp5KU3gEIQhERwJNPQUERiUpTzQJueBHp6TxkOAZKCIxOhJrbkRn+bUTEp5BCEIzrA91oXvIhDfnIZYyD0DCwEIjYMTlMtnAhJ1L1BEjRlBMTEoNmpL8JjZQxbqSbzPgMCMqKYmYNTeB8DwGhCEeR5DzCEIQj+D/xAAgEQADAQACAwEBAQEAAAAAAAABABEQISBRMUEwYXFQ/9oACAECAQE/EIwsLCxjGMYMn/W4aMvS5GNblb+VDDWteXlhYxjGMYzalPKZR0o2tLy8sLDiGMDH027TZ1oYZ0peUKGIIyDpR0qdKMIIEeylSRrw/wAtU8mvOYYYGZR0KnWsJBIYvw8PQa/9v9H/AHl/JlgQQfTEgzhJaQnoPtP4KfReEAYiGJgaEgcIjgJNNdl9sDlgfYZ6dwEMIN0swhCbHxB5w/U+0s9gkfX3wc9WEUKBBNnglBeo1QsLGMYGdgnoHvCKqiBCwkfW8R+0B/gm8P6boQAYxnS9KGhvSJIa3OXnyz+ssMMZnHrpyHOloyLQW/DVyeWYiAGdowMDB3oyNqw18D/LE+i+QoBhhMCcHSHsMoYZf5DfBrjo/U+SGkgBnU9ZtDOKUJwnSxKAfDGigwz8IgBjH0p8jJ5/EF4ap5tecwgMZ3v4DCRlIpPw/wAGuebfln6hAPS/mUn0UgHPal5YcSyx2HPUlBSUMYd5yd4wbOpwZxhLyWFPxRw5YY/Kta3OfyrGRgYPzrWt/ChrcBrW7GfhRit6cMYEEi02aUk5GJBtjGBg2sdJS3aGUpPxLJtsqU4CHLAgTp56lJlllrxhVywsZ0xdJQtSnlptFlhAIAeElrUe0nCAsLGMYOlbitacRoTBI3IjBha1B5y5cuCVjdH2LfxgeGhLC0limNLXgSnCehOewjxozgfpQN/llwfjSCLeCSUAsLTaMDiWEg7SPIoE/wAUADtGZw1vS5WlqB8M8BhQWZY6TrGMY8bWtaNK1H4RnShrXnQNrWtHQU396//EACgQAQACAgEDBQEBAQEBAQEAAAERACExQVFxYYGRsRChwdHwIOHxMP/aAAgBAQABPxDuLiZWaqHReHhsmynI+Is+Bv6+qfOLjz6mgObMbOq08TrXQAy9K2GGqi1X/KWXkPMWE3q3LV2sFnqbnUrYn/wYu7P3P/gP/MR9MX0+tfU/XvUY5sXn6jH3J1LJ9AulUTh9ypOnu2foWXX8r5tjHPvY8lljFCdy9rFxXFOK9FaAzV8BfMFTupOZ2suWXvVrK5bD9482TpZLhfqfFehZb6NzYsP3F1tm8WCx3bGbFzTv9R9R9T5iz5vbVixfSxcFhRpPB7LHH6t4Qo/NS/8Azc6BeDOarr6t6ZWHRFA+gixT6bL9G4pnETTPDebmePqXzFlreOnrYfF9rPt4Lno3vN97jksjo+ua0Y3Vs/YfIfatilxqfqLmxNRs4zU9R72Tifa54o7lZ+R6l5IHrXrCnQe1G9PpY073vfCvdp0dA4WKmObCtg4KtzZTZ1WJlrL9jrDelx/wuHKJ6oU5o9xYSQqhfxJsWcpqLYYhe1NglIhf2FCsBqPH6tXzNm4+g96o2bi+oUfD6jPX1rrp9QvMWVljS2euKot97H3J1KVl6th6PtY/+0U6I9b5hZ9Pte57WPNo+r1vJC+v08eHteyyvri63Cz+s7NsrLrZXLZeW5aaPzdldAnqLLEl3QryvYbE/vbBlPcbBvsLDOB7BQ+bFwREPmsaDMqpHXUxP4UyZX9Sq33VRZPerH/YmkwgDkjLfloSq8g6ElDb7p6NSWos/STZWB+zKsNE9i6VC99w6my4T1U4vYv/AOqLIxA9b/0bONbAc+0vnLB1eti1+vpgOB7WcfTKz5uVnNmmfqatPpD0utod2KI6V2Zuu7yt3LnmZR+Puh/aAY4JxLoztI2PX7UMK+180OPYwUwzfmC6ADiRdfuUNi169bsIezWf4jFloqWQeqbkwPcWxaHsb5Z2gqu/cbKcq1R4PpNhiYay30bKkUMHXVwWFmnc1gN0rbWaRhZjOlRo/MOv2f7FdYLONfZsN/BYP5RdCffdlhl3lmhdIa9q48LoBVL5a9Ss9WrH/iP/ABC6GyOVnb8FABksEFm/jvf9UB8msT3ZI/abJHUaESOgGFdbxgejKgwnXB8URaZpMe3Jvy3PQrIQksA/6vEUmZPYXfQ9H909yHif7QeK9U/hYJh+quTsjfNDoBXeXrq2x3VodD2s3LqWskSJPUs2bNmz97sNKhJhgF8A2JCtGeuZ/tniiSB4zZzQ7OksliyEM+y4sJLUmIw9TZRnlaZ5vr1IE4WXZsh0MWV9k2Rd1SzZs1rQo/KqCiD0QXw9JGnwHCU+xYV56L5oozP+xrPeHHXwl/N8VL/JHbA9aTnzTGVH5Fh2zvwaYdaZpcGUpfo6y0/G6oTqkXIWcib+Cg9zA/1sXUUkUcktSOWa8vlQwRSFtEx6T8BUEDdH/e/pmtg/4FMVTufo+oFk8MMVwjIH9ejZs2bN19KahEY7DNfBgJ5Af/wNfUTXlOKNmyUakFeDmISBFlsA1kwfRLkq4kIKKQhiSsZKoZsDGaiI3GKzF1XgWUkN4AtAkfyv5X48/D80aBnr+WnB8WOzvx/+dZbt7FMSNleTf88yVAUOpAbflLqYsKlef8pcZcWaP3YJF7o9lYMdE/1gXAS21QelA0L8b/aJgD0JfSKxwP1f4akEHPj8m8HHAwreGeD+FkyY3/8ATUfKbclvZjssBEo/8ZN8EhBC+rAvpZVCRRhRHoLF94/8Y0GJSUKfihe9ftBlmhShGTDP/lSNSJ6QyPVKDO0QPd/PvFi4nMxZ6inp4yEyCseUiykwJRePvBUAtycgeq0GIY5R3+IhTMWPKFdiKrkife8T2ysFze1KkLq5hWItDKrUKGDJ9N+SJ4UIoi7GiphPFig4K6NGZEhP+FUtmLpewl/LKEw+D9w1N7H80aPt9wJ91qqOpm/Fd605+Lir9sfq1ZMc7A/Br+IfE3O4rj40LmR0wX+rQ/8AjVOUOwirMKquKnaYb7ALFlSiPTDOqjw4jSMD8J9OqD2/8Qe4cH3i9UyZkpiKOSMImsxKzUSlfH1IL0KuI+7oYw+KpQtutGeZUn2U+j6UWsODzPQWsgGsMnOe7XBMoJCSv4oFv4Sf5WPS/MKPs9mXIrtcZbYsqEypxEH8KPItBZQeheK7ka6+diNH4qIEo4tJgicABsDO7pV6PVVXwVfiiuKKsbSdlCekeGg3AzA6TVcAqtxWyOVN0JabqqROEsH+WpyXSwqvKRQ5Rg2tFhlqTKbVyssWWW6rn9KdQ1ImSPuLN2xWLZxGek+XMik6lKIigxO5XD9z0n6HtxFIEa+jVYTRPVZfUvLrl9nINYsR9xWgE5EQflTu5UCwjPoOr1ApLLFEGQ8ZPy4rvz/la/7LzFX5GoEFTwzYQBAshAfRiw/js43QDgf97aHlE6FSJD84bLIrxM/Jo+I7IUIQdhES6CCgQUsxIf2zPoEBf1dTZApSmT6pu87FrUhPBBXcfd1fleWbBqfNsTi51l4Fc+AVYSwPMV11oBi7frdXChKiafyeHooSY6GgdhU6iLCMVRWj9L9RrPpYURmLtbksxo4K1kPaQPe4aIPKzTBReQlkSey0DNYmDlBsb5gWCEW2IaAbNxH1JYrOkwgxhlBq0xoVHCH/AKHmy7MoX1KWbpXaFTyC4wFLwIrVgHoUXOnJQxxCQMpeIPZcWbsaq3nRU88fdUeWDHZ5HOZn5qN7e7L+yHwUALAZiJ81PIYg3Y3cKzk/iKi/KqZQ3qBPu0T7W/CasMXpM/lGVgJqh1ZKFHmgvwNB8Fb/AHBFaz3ZblkGyWCwcmw6oXBr0gsy4elk51ewBr6FS+echr1AyjBZnrRJHrYBJA0bhKDYrIeajNfSJkfxpCchGNOSfik5goHawTocUpNHQxNRJiRG6x7iMlbJyTjt/wDKBEhGu6WLNijyINTFVgo9Gz9NLilzho5gPcjJRdriPyNnsDsKQvK8k0UHdSJ9imluhf6VUO/pDJrbvZruFnnPx5G8x9rKcBZFmGCyKvGkgo0MLwyrcabFx7tLW315FDwfcrOPjipaNcGadqfCPr/zqHdaWzWC9f8ARWcp4j/llCI7/wAMUX3E/NOci7VKjZInwVI0r0n7FdgquP3XoVKZwvNEIoHxBZXqAFkurBbKACV1Qe8hQ7S5QwRhEhLJ0LJNHsLgKRKxEP3kmCaPUuTBPxqLFeu4hE5fRoIEMNwUod6DksuUZM4kmhAbI4Do/wD27bgl15rtL+FaAjXLcKpzQKw4SZy1uKh5ZX41qeYMnEpQSTmGl6Ux2gcFiNgaL0O2sTw/bCzRjYaS9rFbNaWRwcOMJQKmckXgfoMVqtGvCK7FFC4g6lchyYQLJwDj4UuHeAe7XeUV1N8YVcdfWx8eSr83oRePYZhHWfAsM7tlUrXtkfNb1PwUi3DpLYuv0sOFvSTelRYA7zXQ7cGr8/Sz5m9bJy+9WAoBtVgLATU0p+a06nTMbCd4ml3zNLFI9m740I5UPwqsRFjiQEbNWiywXbD+xQCMeJvR/hYKHJeE/oVB2EwddX3tYuZv4KAkkGPX/wCrCxSLBaJvg/pX1fFXoifLSBIyPSCX4blZJm9oj+1dyb7GLh1QlK5QS77LdL+QUGgIHf7R+DYNe79GrpSYK0oKrMU2eEbAHpq7L/talmBvvTYXQ/BvKcTi5mjNwJRIK0yMcKi09CiBc/sD9SSkxirQqghBnmuwQeUlLBTGOhFikJCwFixDgTzRjomTFaNKZJGnACpCjHSlJOBIkB/yvQZG4FYZR3lo0Q8TVc0iauIb2AbrMhuPWRN0AuUIJ6wyWbp2Q9uGtBeQSiuePqEkoQgZA9bkKT0Er6DSbQ3d/LfL/tQrZQBcBOiNLMMcXigtYVJ/M0seXpbHzv3jAFsvEnjyx8XMdOvtSq9G/eoWGhndgd/jhucCQlTpW0CwAPBo9mkIYaSzMp81kdZUfCtAGvnCkpDY3CT8U53c8qLWclEVTO1COh/lzr0cJkpEWoc+WT5vrZImpK6l+KCgZWfWpIGUe4/5YNCI8dhqM2akiYrJmBVjbA/yjmtvoZWIWUUPcu41FHZgom6NCJyGbjHno5mr3a09VgOIayGNAKacmbdCksdmoMcoYIsGEiBT6NC6swQ5q4KpBCHFEEXzQYZRzNyXKxVUTFAp8RC1ueejV0I5JulB90EnuK3oawSSwj1o1iirJLJ2lCnn+QUod6yuUrszZ418i0qoiOt0efJSpQEyxFwq/wD2uoXAE9Zrw5Tvj+Nsi4GnlUfwUcMCOkOll3kzj4BfWe8VMIjqYGfcu3XrVRSMgX7GzJP4EPw0Sfgz6h82WGviagLFYQ2yqxdH+hd0wh+JNgMEJHYsk1Az20eQy0vYf7e+vrM9fE//AGq1QH2L4tARyb3RH9KAWwTiSdNeFGPIpZnabCciI9xU5NoAUhXE/MgTh96CezL4iKZ0i+GbDPnBKZ57dlLiUI0LiZJWRuSNAji1OahzAXqWgDJ1xLZJkixCwmCUOYnq2WgXabwHsC7kq/oc0OSbA4KUhnoFWL6DRhYTveLqzZhm4sTB9RORnLuiBOfN5DZoSetmNDL9R8GxPEEcsVaS9vrks2ZZiYbwMP8AVH5L7abc4rG6Ue8NmOX0s3C8sT2GzEJumnT9uTF/IQGkQPxJaKgj2YPw0D9T9yWCywW2vBsmGIPavT5FGUMlV4+CuxJb6sqVEnFzGD3VelI8nuXV4Z4Pv/O5nVmT0l1PoEJWK5RTglXzZazkvWF+LLaXckZFYakbrlI/sVR0o7S4nVlVVGYBJhqPzw5KKxheIa8+0lEllI2eeuprMqmHU0FZUfCyqoAAySY/m8SEMWrCnLD8qsIFDbcIQbdL8CaY3c1NZx68/wBpcPoFnVOSEWoQoAgFZGWT1spEKp1cNAXGiOTSGcOxZzKbLq00CrgCtgyJhGjVs4Cn0XNmCv0nKgUw6LlepTJ3UIdaAhh3mqEo7XRRTlPFmhR4zw5HxZsvH3uBUZ3S0ypP1qjQ96gj8anK43SVXfma9bK0AU3mGCOYVYseBPRgk60seghIJH4mw0X0c/zpXslB1vlTgoPwI+kYpMGlA/gxPixGHMyg8R1Ws5WAsEsn6XMtm4CHtpNzujog1Q+CiJZtZX2LCZvUf50YRdw+TcdHnGjUm5dfgLzCSzSKyyfaW7a6ml97tLOXWGDIxQiBKj/dPmqYhOS81XWgYvgoMMtLuxk0pRO/Ws+jEKwkSZLLUlZT56RvSz2KAAMTRLXg99Z4SuJxcDmJ1BXmR3apdtmuCjqu4xY5NrctMsQwQxVZlmz9iIUwqe4lE+UwZbZLzdtSKUqTmv26lshGKB5IRZMw2QQSihPIehF5sYpLqhUVIt7F/SFy2fei/wAKKcjxs6/aJbmP6pM1EIDqBLWgE7oc4bjZNN7lRM5jBhhXwopfeSYQFgTjqMhKaGJ8cRU/1HI0TPduEg6lWb3uP+UolHpeWpG5HV2yYxIlS20oS44X4qlHPOj+VSpKkGDRCwzFWwfgv8K/j/P9ZRIO1SxXoPp2IFeJPOH9ubC5UrHr2EVPmxY9EebiUeMWBiPYLyGpTSVRlQhZJyT9RtD6h3XV5komuCTIDTSdhc2LCMG6YyLK5gULRNNGRGyKyLKzsqGyQJAtksEBmuWHdK3YfWso5AcV8Xs27HuUUMhWv1NUJQZsjU9zZkC3TCJVhiS2RKTjku+aRhBTfbCpLSUsUqrEV7xKdU0NWI5JknzY0PiaPx8zWWB7QepIzYkmeU9GzZ681+yMtHKlLIv4ms4YUsuNOSWiTwdcvs/3Kd69CrEvSBDFohIHo/yNJADsP5WNdYlz70fGoAVFhmVPBVkpXQprFkQVJsdAskwGK8SFW269eap2tiXFTsqhLCgTRZpCBGJDzgM2ayXfLYIu7Gjmar0skzyw9mpVguk3fVFlSM2OuqFSPLLWFiOsBLzisC4HeiSAqoYzVayGBCainsggaG2RIaGWTCA3c2bL6YUidymL06erQTSfdo8FDSXBE4nAFciZVSvXO7CWPxTJIiJisVBBITeSRk7TF7/CbhZ+3OhMc0YbqIkChNJz1bPyf/UFMmM5+NQ7PyuGHkYtB+yogECVgkjsHwNTLVvAcP8A/tS/TkYTS/nuPGlw4Is54PKeit1oXoscHYJq2hIhEsRYBXjBfOehqvXVZ2ssfXNmfoigMIM9Kb7VDkhRnDMvURoOrGd1gqs7o5sAmhKEIBCedPcVj6nNio8DdQrHdikyADmNzs0LnzZZwPUI/tgJ1eCy9EElJdqfx/u0qKdoCxpMcy0bjue7RiKG3GviwwQHSZsJoWISKuFKYkq3L7MVhInWBUdSmCVKjkk5n/dqyo46FvCEREI0UGXjEcxWJXgEk0Q7AZW6oSZdrrEBSTBrDEPUaZR4UzVLOKrFWhNT6iZ5qRO3EV8T+2H7DFyrflj7zVMQOpIVIAqLLkzoEwM4Qi/oJiwJk9CykKdxCWowDKrVqzzPe7k69PlGz1ZARZETDLLLlCoxYN5uHiy0vBbQHxn+c3vJYl1eyx3sFgbGJ4oZwUQCcGeWAsYYDb/jSvrNp9CoxQd2Km99BUJkdRYv939GrJ9gmOIgSSbNEnwhXmP/AK6teACQFsUj3omw55QFVJ/0EwV1ZaeJ3lfpQpwfL/wuZA9JUmwTMsVUmbTEnwXLOlheH3bOqHCVLBasAF/Ch4BCFQg6Gq8ipcoQ67qKKARpdpgYIOcw0MHAkRGa6w0YSw0sYkI8mipmg24iKPYyKGdTUFEksEqCgE4i4AlCEJVGWcDtZGiSCjAoTdhMsN48fU4q2bM/R8TZM0JMbrGBPQsEuDVL3DAOboS7ZoRHoiWSO8NG+c1JbNmzQ4ZqPEV8RM0UNhl3PN5E2+ImT+Pph0bFgswH2GwHuT3YqfA0T07mKIsAVwMtPkjib/Lr32/K38/J8TVrB+LdmPmRgh2adPEnxzIZLj5iZoOfGzp+TZW0QiDTBBkspZTp6QfLXL+L+Cn8uhVluLseyLGz+z4C8n+5/wB60WLCGJ7qmY25kj2pCs4QLCzjcFnXA5AieqojeMoomABlip2TAoqBDEA2PSSskEiASvMlnrr26cj1ErgJKhYitVoSMgjEvDmjZoBEbmRpETeFnSQIXBEIiVM9bgeIZ+0UuBnKR6NhEigBhLl1QJWGIZpHIWSclJVKyBEfI+tAjEESMQzWcExECob3B5qc7wSizZHX7FFdPvD4qXfrS2IYDPQ1WUq7bL9x/wCAwsMamrLeR7hZZBtyzXWDUi5P0sUJYbcoH6k9K2yMSy2QNcdZK5aD6Taw4Q6t53QU50KmiSgETMZFCCTAYCMMpcvppzupg+1OSL8z8tFhAgT2Bjgf85QgAxSdmnU+SzZEYE9Z5AeGfBcMxNj8kqUHAFPq5WoXIVxk9s/016R+BSMFnCAaHEqRJKB/RMx7DTSDIkDLo0WdE64Z1HGOarBI512D+1NQEbOEi6diNlVal3NB5FxckaHh5Uxq8zgqoPBLFJiJLhCStRk1MGTBHjS16UEAmoj37VeIASznB7DZ0CDOWd3rWAyhcmJIBf5Ua1gJndnBIVgSAkZfDTmtgIkzDAbzSoiX2ALFxAmSKD4jbNilqJF8hmg0j2hcfiPLUm8qJkwXqMcitepojgXsTZsImMkfUzkKMMUXOfkUwyPslueLnBEkYmapYJ9zPQXe+qEvQqkBOsQBab+YhZKTg4YaXs84BXCpB29PYP1z4Ftx3K/P0LYjsj1X8Qr+AdO9mheOzRhU+F+ChuzYKsZazmrCJidJXxSLHdP6aRIULGO9ZsuDOz/AqNG9XeitQwN3F1QB7BSEmbC4EsEgknFTDniwipy0JElKxQ7HA86mnUxZPUTEk1OK3suqavHZLFWyKyDIohuWHKMasztmNEsJ0iSKlJB7URjYyxKANl3kMgYODp+KpgqGaEIm0QwVDQOTnUdY+JcShF6o/JYpyceakUgQFwMLRjIgoO8lhLnCAMyT1RrglFZAmNAhZN1zqApCQBLFMxdBIw4YlbkTkAmYEEgqco9svlbEokAwXew+GPi/uktgf4WW5sgxJPewxjBI5z/tPkae2vwTTGGgFLoyWaO9MR3mCsNaNuc1AVhyVZCnnqAoQJh5BZBmgwrOY+gTYAq00VCw7kyVC9FJ9KBNFosteBOKREFPEP29Mmsp9pYZqYKpD4fckIV6ISL8FlRWfIdpYAWIX+Wi/wCH8GoeMIukJkaSP6alj6JGkQ2rS+bqxkziXCLua1/ATVkmYK72w4UJmBPbRkeQ3SLiF4osBdI4RqjlXre4WaRVOaZvASHCZpCYVPwkdAtFSSb/ACg8xJjVfSMYNCAQkCXUdASN1Fjl/vzFiZZ8lbIiJluaJuomvAEtrgCc6U8jZSGSaRlJAzWOaz0oEvCUT0rrfXpCFRqJZnOTdlQXGyZogsxgMnUqIRoirEDCAKDlRknPB62QFmErSsLIDwvF07rySkfszYOh2Ckea4IEcU5iT1rSYJwzMk1BITtICk2XQYDylo0kgjkeBYwD8DREkvmH5qExIsJ2oqC2QZajhnclRHEoOjwngzm/LoX8trmk7K3tW/FQ+f6yS9w00gonFCjyx53kUHVQsJjLZiPqfp+sA1hlpIQLLqApqo4YlbTNF03qpD4jQUX7iQlcAlAQ2dANyNLUwW56AoMq4AKOodEMqMIhmydWNjeRmZhBzrDVeBE0J2aoaug0CTJJBI3FsCbHDDk1pnbP+bgAkhpOlJNYCmD81w2Je+HKRLtQRPRsCx8Hh6fA0gTm2LYAggMCWyBotlFGcmWvNAIQMT0Wn4lknf16Xmhm8YrGChIkyV+DCrHjkxGakd8BSVEtCI/cISsgnm5z2Jx8dyqQIDBwPNB6UR4MNxWkVlDCwiBMsJ8VhZfeQ927HwqlmyZIhOZ8Q480AArhIP8A+lWNwPlCgfTIq/K/XqJQsIXe65AI/wCqaUT69HsVSHyB2Q3bQTZ2TsZpIEGj4iyw953SAEVLwnJTkpoghRPOzu6x9pgRaeCkAyFne5xPiinvqq9ddWxMetZuPTk1CYg5ndxQMISJigwykiQvLlryv6e1zQYRw591hMO6gfBYKYPyW1P8oK/sJN3mCz96pOEe5FLgh046jXpC9wNM2Iz1MZq7n9OobvHjQHhwJTBXyLNavd7CeuE+VFmjGtJ6ij5MQWCYF0bO5qyTwQICCYDiuYyk6pEqMBfercHSOK+wp0w1b+STJAik+ZyQiGnZPdijSpHMZYZxJFq5by1W5BzSXceJBpAPNJmhmYpME2Q9CkMEScwgAnlgrnoLgZTAJzt7WZgAECYH4amSXCbAIoNkiBOkhmwtEJmBrICEWNCg8TIl9z9WoYZCSIVPmjm1HVs5yABDS9LSPOUVDJGtg1j3HVX8KRnqSE/FrqAqxd3qWWoqNPXbn+2XTgrBTOBi55hIrg1xCvn+YrL80q5XYkYz5pXG99zWN0DFhMXt+FaYf5U/tQEOl5LgmmcTuhmgyI8jpASfJxBSKFrIgnCNcl16MX/KNtKmD6yfFKQfq/lKjwLyH+1UEqYyPgKsylQCEyxyqChFzCMExizNPvj6f/A+sDGohaIIAKgryVA+YAo+UiSYajBSTjFLeERD5yaDmOsNHTBZGK8KigCTRpkV6VRrIeLkQpiexWH0TXYLTSmDYiKs2XmoDFG8Vk1y8TUuUtE4WEDQCY5ogSCwsYx7gs2frHxJmSBmcVm5ZEGZSD5Ky5Hy0cxCPFiMrmgYydOLUCSxmaaFRmaoR64CpCuEvF3jNKSGm/8AOsh2ItBuCZklXwwgvn6WWY5sT+0QigbyBz3T71ZeysL+0gJUdRbilwL4og0XOd5YmwzvIK5jOf8A7SzQhoyl1dPL+YqqHcjJ928Hsrqu6szJaJloYKPQKpKbNfJ0M7+JU9AoPpJkj3xUYAOUXurVoKxFnDkvqp/CzCfGkv7rJDafhJS/aIQSxLRJzZELn0JoYZiLPTFfJQ5RIwsKSFLOOYrErggqAgIyo2UUUUHqLJrCYsEWj0sc8wJyMvZq5gTMFhyeoPvU+1LAEMspfBr/ANuN0y5dqDgb12GDBFBs9ajvoyUNhRJ4G1aDCT1lIE4xKxUnfKHFVp+J1xRupKFf6gFD/QjWHd3cNkG7JhQ8rYypuyMpo3UghVdAWxJ4T4SkqMmz+YruSIiCWeE6AiwspycrL3diEZ0/1qTRkMSSpNFCCDJxIWG1dweMQ3jxlvEnTkqs86D+tIQ8sJ8FVTvJriJKzCjaQ/q0Bi+H8JZjoJ8k2dfZWKEega8MEwSkDbUikOFNs2EL3rkkKk1mHbIUCoSECchxII2NNjBRFRZENU7erj33GiAbQD2w146PZfwanVVy/ZbxOyWEWNVMUAJU7S1niv7E0EJpx+PikX6olqSkrqSxGJU376HUKyOQZESUvUxBRh9tlJiEJMBLNhUmCgR4daccOMRwa5jKZs/URLEge4fBWiRDKwqlFgtlCF8MpQnIENzM7XdhsWwyh2JbyQ4iH6rinmEnwqZkjI6AdNGdrqcnvNkVwXAQwokBRYmOF0bb9dxioeAsTDnhuzbYQZrUwv5ir7UftmvQCVRkO6IVOeoBg3hb5ZqM/p66QvQ1l5PrFV3PcmnQFE4bESjBQOZqB9GWpsytjR9KbJ4rwQlecDW8KzDGCeQTYNEa4ACHMTNXkPZJ9Ckx4r+lR5txXBsckggyNdQ3ro92x8X/AH0UwSjM0f2KRYSzlSanwx5wWWhCDO9DBK9qB/yZ0uOnE/7FECboRfYtlhp3B+wCsfD4X3avAHpnpOWTGOjPsg0kbIH9C6vLT2DWApUeC7bM5AeZizxBxh3MVKslzKZELTFDZcBhxLczRDF9Dj2qEfgLGjKDmSv16+Ymd1EWCDsRZZxUx6BSATkwBIZCGp9uQQQvB6jikhIKS07kZpgo8zZCDQAQlDBlCKZ3pwMwsxKKqQ045QTDeWxh/wBq4CyJeZJIUmUzMNDn+HJj2LlO3h/aKrFxVoZUSPkvWPpCawdydTAQiqkaWwxJBC+Ra5VJ5j+JYpWzkEgoTtQ67b5k2dIBOSjiYCxsCG2oPNgfqg/W7wnqv8qb7EaAxE8dnsHwh8XUd5be1YixYBloFIcCa0zmLxcyD6lUGw0B6xYiIxZkmSw3XG59PBw+L1wOkLhXyuUdzDEdaxmK1lgJORLKzNP8r6/oBMluAX2skSbLH6IUT4MX9VUkXQL9qmlZ0j+uBWMu9fkLVWCv/IVCu5b+0m6fBJ0E7YK7YVEPowpao25rEsnsUvdxfuLpqLh3JvgYiHJJQbHdoiTGe3XmzVsny83IJ7xgZAjcoWUMJWF98FCY0axxmxRlPCEuLoJHFLBkCm6R4r0s+BhK90Ale1SdTs9odSoUk9JjTuNxNkCrtYCojnSWJDkkKSNnYKAX/nFBwwlebydtKL68FH73D5cG1KoPOOj0K+Qes6sukX8py5c1KgqOj+4LGLsJgokqrJC2CDB3iy1VYmAgO4aoR6KfAp8DdHrdixYsUlYGZbELhVIgM0ZVvK2Zr0FsUs9LELCpTaxxQJspgJ7FFCJG6ZBPVsRDVx1hgrLLlcnT6OeYsNYSyDJIcJuK2ZDyvJdY0NMjuM/t5cU5T6stWwF1CKiyPdn64ursbNKE6Vqf9KKpIXjklTaclCsVTw9iROUrPlyszmA07oHpGM4QXMSp5UhihY15Y0RIFnNSlfzqQmJGaozeo/3SsZOkIvhl3hKtPFy1V0q4y3qKtIlAYLI8lfROTbqabWqyUEqcfpuOfyqnJRI3EUuBfNrtym3J7tF54BZUp1k5hocpl2wetGTAJp7hv6iinNhblso1fK+TQNhYHFzUzlPoy7gqhmZsNZi7uaLo2c/XDf4VE4lm8MmmqZZadahOY3nUA6Go7X0vQ97ZWWCq9urdtraWIX3MD0oEiDqlg/565/o7YCkWfNk+mzd/U3NdU/8ABOhPXFlMnBmB71k8dqcomdrZQxLBjL7Xqbt+qUQRKzr0zAIsJnkhqgD3FnnpFeEU4JqNFzKG+9uP8LvzZ9eS6gWVVyl22T9KoYsiUPTVg/8AgV8iWbRZ8oXuLDrcW6SrNoKSbTe7NBmpjO/LZ6H3kS56WGdYsTQiZpFAnS1TK+KeAWXIL5FJc+9rlTPSakmgEFCnCFSAiiCa9CXJzBQu2p3mwaUkxWXFHwLGTObDqGixroJ7N43rS/3LYIR1JPtbH4Cqz4FWNSEsN7QpJKZanPkIjJ0jdnQLR9USIzEyFaigyFCifXagyg6twARVgBFaUdhV/KBGdp70kWXGESj0asLA7PaFgosS+gzQ3dRnoCk1TtZnqtS8Pl781yc+eNK1LX7MaK/L3HD9nJi82Fsuj7WUxDZc1HJvOBbPos7wuuMWUpaQON2TpelkWjIxLZzSFsPRiyfU+dhmiTCacbo3Sx72ZqdhqcRYnLbFqRVxBL14DoWbIyogjBVn0WTL6LDLKzepJoF7RGrEZnFnytiJLObPmxOh9M2FPSqkEoO9QRJ6zQtpPRYyI9SpcdxbrLFsr0srLWzQ+tk9gNFobmX8ApAUV+eZZUHbZOUjN+JJkVP7+LLgKqFYSrPqWefXh71ShjPKfcmpuHcu9+higRl6PQla8gBH7zWUuXrQSENKNxve0qtZ8Pq/ZSh7Qqkfrr86ZxB7c1kye7Ysy1URYTeLrdgQzNlSzZ1EWVKrHLTNM9GnTRJR+KQdlg5WmcAtEiFRYknlbGCg6F+hTnl9bHxoaNvBYeWaPoz5KtmS8uKJFlseZ80LfnXy9bUGVI4R8Rox7RhRZ7orZMz+Lk+6WS76LJQJ7XoH1LAkweYuZQjaxQJh9s0HN8mfcaeBrIwIrMYcwNh6Xalhk92s5Jzxlum7wFnpdRkf1dX7jFM82x0/eewShnMtk4bB/tiksR5jH2WzvDGUfeuzmjI92kBzwApD5Of/AGqKotqN9W6BHwBel77TiA7y3y9gULgq219WrZZuebiIsEOWx+VGUgsowWJomwHiwNtgSAXtVuzsXyzulE4KEyjLoGggSq9AL4F6y2KAac0FkBWbJPgrLqbM9fWhJCwSpUbn2qYJoDEg7tIwBfIqQnuhFWzxiSUpjkByRLN2yOwF2fvN43soISJpoQuaV3lHmnIIyzR4d5oeJditTxYXBpmDxhklmpyIPQKYUSejVGZHDpC45uYKwyLp3FY494liqH4beB0cwsQ9Uzapxg4CaTc5s4AXwG4wzSbEaU6ttK9xul1oQETH1msWLywKTMdrjRnH+fT0YxMr92iZMjmJSbDRxArGIXdWs2A7WJHNxBcgvqqnW6r1isvJYnH0QFlonF8FE8lD1ou1NycsVHTelloieYpiwxur2M0LkwbiLFMrTrRmjjtZiiCD7RXpx5BqtroBBPPLYaCUk6dYLJtPmzRQdgMUYVO1NHYzMaityMu5qXnDghaHJ6EWzviJMRZREGJbjFvSSlQItNeBiseJxzYHSGcTNfgEHcURAPgahYuTAxV0TUWB2D5UIWrUMl0adRbmAPEUoLAao8i6bNeyB0VFg7p84X+UCRPRBZubxC2u1VeNQHBelng3ya45sZbB5hwVjdAcxzS6sSycTY0HkJKZrkN4Irsc0n+Ch1Jd4ZrXAVpmWmwmKgIFq67VXLmg/wCQVHQ+tnyFCHQbGmVCsQtU4Y6w1ExENzBFEJgJzuikYHTKgyaCEoHJUvKj3aNFc4B6Ui4Q6L/CywyNT/LUS7jDAUZoRISDhsmgpFw7QUuJaUrme9hxGkCRHwN0/gxQvAwyoQMPVqTb7UTK/rFK4Z8roY+1WIglU48GW6IQuGHjmJqnIsbro8SGCbiixcEKcLTQAHvZjGlygIMqk2ZEE4saHoNiWCFgoiPRrEICjaGVgrHoDYUDAYpw4YYHCWKUpGw011hXvWCMRUsGGgh2IZ1CLEOEU9kqZpFkDQNYbaCjadAMQuEkLC5b2LEiA5S4M2Dq8MBTlr+lQU6mkWFIFY2KLSEfMFGVk461YmFkJUtdJGOHmq2Y0lezBYgpOQUnotEssD4MU0TEGZp9UzZzZKpJhA8sez97KEAMQJuH9UBVzMHewO1ies0OtYzRJse11vYRVYxPLUo9SJuaR4FdfMCL4QSSsaA54p49gLt31JWc8bbAcTIImVYkklTNkkLHQ2JCZsQiNWtHIMC6e1X0uMU4ccs1SEFS447WMJxSuKhdwdGzkBGGl4pJEh6aukZOtZ0mGI1XkYIY2FnGq54KrzZz+drJOSzQcNg1rrT2WScivzkV9bTORkRLXUU5gGnE6kQFGQUJM+kJuVD9qkM99SknsgWpbY8BUHHfUpcAvCwo2R7tJ7vJQBmZMPeuYkgKHUgo4WIYPL6RFh/JE/vKxTbPAVXGrzE1x7VKrJjO4FyyGOsWEzA+k2kRGzijYRvUVkYB3bBwZfNeUCd5voVEMFh4BsnLdyEc04ESYEFAs4t1IvCMtXyTuWWopRGwzUQVZENoVJRdWGRumUnpUNFchmayDQiGyI5GyrOaN2he91JVSEACpUECHQoUwVEGCwQ0+mTDUyn3pqVgmkIjookzIxEVFJs4hxRE9HiuaS0BClnCeWSt5FGeRVuZezUUIJKmJZr2D1SEVAXcgiMzqgZhtWvyq3QAmudIPBZEvubCaw9WxxT3sEQw6aM1mclk7ahEp9KpLHSOlCECjkXAl5kuhx5bL0ENyUSk05i4EEL1i4Nr1xVhAu01RzFzaTukYKRAgeJsvL5K0CYPRT0iwCxYSeVLovECgo6pwKhnEyVJGBE3cef1FAIcTZ5ENls3ZR/SOW06aCZOinW66hrU4RZLH1lWOIG8TZmxtLBZNkkLWEibIQM3k4yr3xRmVGugSBy6rZmYvZCkwc/1WMJhLj3WCDU2HRuZDYxDziq7CqYC4Zmy6zK9Rb613dN1Ey7iEk5mwdIP9VbCDk9I1ckAlAGBB1RyBJmEkrlkgcwWLmLAS05ZqVA0VdkqtZjc1ksg00yH3vMg4myiQoek3QF2KQZXoUZBLDzFQssD5aHgAXbjoRUDklOagMavgA6xUBYHOqyzL4jUN7oV/L+OX5aNz7gyWbyXRf7rb2ucVHqcAwNk0nCRUyo4J8Vfkbw6kuUgXUBXgUUBFhrZmssxA7prvLd2ZKFGOW9bDPoa0NUA97FJK8lCCWLAVQWVxDh/hcAje0qyZxiF5pIatKrSjLqd6KGZCWpGqoRHu0WFQsJPItlGmRZpMQGHNBZTZl7SlGX6DOK0TEG6n8ddu/VVp0BLBXkIe8A3TIvI+lA2XDVplqlUpNTGcUSmoooLhUzuxyo5WXwfXIIxeSFDmK5CPcFOUekr9iqh3/0CIP8AvuhZH8JZt8X/AI9kw56L+rcKh0IPqCqHriPaiJB5XvCk3OF/sFSF7ZUSqLgd/AWYAIPfKlPcIyXa7+o0+cuqx11FwiTMzcvytYEVwYpbk4izLnVjeoyX66HAegonFWsvetiM0FeBPegFcSKc+SObLgJYd7jVwHraABML8oCEYoIJzYxMmLhZKwIrH3utJbTdCvqSpuC66w3okUDR+TJbFbDElyxk8EK9+8rLKV6uWgXqCi6IoUEoK5abGFWeWwtX0bJsY32WWAegLC5zWUkPLZZRJ4OLPUWci5iZipJhUOti+mfINyZ/VNdd3o2G+cWfe18L2D4vHD6rFQSwpBKcE8zWmTw4HR4Kfz5mjOZMsSJBRxYNw6EBz+EDxNfUJ8PypAEvApEYzOk0NL7jQ7q9E0oRjMABjT5WlwIzjrdaTNxjKQmRs/HHvDbDFEUnMymXxXwVAY1wqBhwIkqx072RhmlXKSouCEmKgmDLZrwUZYHZsx6ZWgQljBmaxochcuMdVqke8rGPCJBmxGSEDaTVt62Mb/gpEevzVq56UuA+iVo/jMq5uWWwOrQsgTVOZzfcoGzNweZsUJulBCawLLIMG81YKtYUijsrFgqPeyxu5+ooSWOkUPuYu+KtoAYFAdWkiKyCIUgzpbB5iC266gHKTtaJptQXSZGftVhAFFLl2nNXnBAwqPdZdYRheBJ+ga+9HeGMv3P2zIVVCGCNlYF6cSl7ULhOsIflJCYSx3efVUjIEg/9XK5WIPXECwwWUgV91Gmb6IKXDbU/xWWSifVctdZisgiNjFwE5WqcQEw1CrAnJzTEORDV4KitpgZiuFEF4OhtVR2kockAUt3E3Gyji033ds10kTZSwRK9oalWw6cQsymerpnkKozDtQ+LQG4VTihmZLD1sMWLGa+EpEUBdpNV1yUHmz4KnTFl03M5i9dqnDvrRs4Ql8FR5Co6NFwhWFvNULOascE3sLZ3CbI6ju0ZyXlVdr1CfWqlEcwksgHbOnepWH0JHw7cK/oa7YmygfgsqzEes8Z5Om2tijeUiJyRsmSsa1GR/EWVl56eIWlqrl/tDcV3H4wUbmnHxi3r+hR+8aiYnhI/E2WZePaCnDAuPlQV8wfodQlONs/BFNZ740eqotjmSPiyamWKVVbOQSwMrXDlHm5rjbpFeywaakY9G1vvdoLgTU5GK9XeEWeUHdcx3VX5oDlpdIwLKNFzdWfBZsk3A6smIqluKJqZmag1sQ3LWlbOQT6WXrRKUCkkVA4KUMY+neOtToFySqGNVayOFD1NyQzPSgHFIEVLGqdBZHDDfR6tHEQojOfYuK/V0HpYaHQEJJj1K/jFyogEd4yRVXCl5uYPBoQYMSR6GUKID8s8ehU4BYYV6yXkxyeyTLSYOrOfoAq+K4VfxYQtx3hIRsy77byaKas566aOvuRaXQFycxReVmwMylWAYSk8uJSUtKjUIm25NL3aBiAoA3E6bE5rVmy7zYjNmCyNhOitoHEVPSavp9UxGaddfMU5LQzmbBxfACx4oYsTwWJ3YonISdqUCfijGYWJyt3omjAInt9DmtBLmDzXud4uZpbk3pCerZTGKE6r6t7zdcNxXEAfNbC5HQVxuXC8pmuLghvSWmpwO5K4IJ7tjWC+ldwiramrcim16mkVabC4W61WeIqp2XImp4MtGUOrsnpGb3Zswbn03XLFZlbhY8RNWbom0Kgf4KvZM1ar0Zc1bf60fUubuxmnEH0MKEa3drH0aiac0O9T2gtDEvpCwu1ehKwOiutTFWoKVCpjFbKbI1U0RsbmwvNIzYoUkJXNyok1Thp5T6XVko+tUpErUcVQzYW1XHNiCnQbAaiyiJKd6uhxZbibLssckszaHeryIeCiizDuFMMh3omnxosJEpSMqXHKmKwTRNRmRYmlvY+8WSyXJ3UuWkeaDmWnSoehdMQWNTcqFk1XUt3Z1PQqbSWPUqEEmoIGToWB58FBbRFg5KBQwkHFFXOfis8MVRTSzBvaUaxVtbzl0q4T3VDiwiRisID71ENl53ct0NjE/TC5dqVizjDZZz+WbJ3ZgX2pwEXbNzYYaPUqPpPSnZ7tE+Qmgy6TiUKaod2asyBXDlrymi7ktxNkOW9RizJNPNsDpoXFDNRuH0JBNOT6YZnimNohVH1mskfYUJCmouZFBSCjwxYzQEvNwMi1x2oMuKgrE1FhqaOEQ1TGYxZeL5pKzNct2Zt7fUxhuOhLX0rTclnzVmwNFGqCwksXSLOd3eaN7H0sUjDzFhcgd2//2Q==" alt="Shows what radio buttons looked like in the olden days." width="600" height="400" loading="lazy"> </p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> <a href="checkbox">Checkboxes</a> are similar to radio buttons, but with an important distinction: radio buttons are designed for selecting one value out of a set, whereas checkboxes let you turn individual values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.</p> </div> +</div> +<h2 id="value">Value</h2> +<div class="section-content"><p>The <code>value</code> attribute is a string containing the radio button's value. The value is never shown to the user by their <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>. Instead, it's used to identify which radio button in a group is selected.</p></div> +<h3 id="defining_a_radio_group">Defining a radio group</h3> +<div class="section-content"> +<p>A radio group is defined by giving each of radio buttons in the group the same <a href="../input#name"><code>name</code></a>. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.</p> <p>You can have as many radio groups on a page as you like, as long as each has its own unique <code>name</code>.</p> <p>For example, if your form needs to ask the user for their preferred contact method, you might create three radio buttons, each with the <code>name</code> property set to <code>contact</code> but one with the value <code>email</code>, one with the value <code>phone</code>, and one with the value <code>mail</code>. The user never sees the <code>value</code> or the <code>name</code> (unless you expressly add code to display it).</p> <p>The resulting HTML looks like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="LGzCxnDUtgphRbcPTjcIeQ9q0Yukso+D5yV7Ek4RFIo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Please select your preferred contact method:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>phone<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Phone<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice3<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mail<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mail<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Here you see the three radio buttons, each with the <code>name</code> set to <code>contact</code> and each with a unique <code>value</code> that uniquely identifies that individual radio button within the group. They each also have a unique <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a>, which is used by the <a href="../label"><code><label></code></a> element's <a href="../label#for"><code>for</code></a> attribute to associate the labels with the radio buttons.</p> <p>You can try out this example here:</p> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Defining a radio group sample" id="frame_defining_a_radio_group" width="600" height="130" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/radio/runner.html?id=defining_a_radio_group" loading="lazy"></iframe> +</div> +</div> +<h3 id="data_representation_of_a_radio_group">Data representation of a radio group</h3> +<div class="section-content"> +<p>When the above form is submitted with a radio button selected, the form's data includes an entry in the form <code>contact=value</code>. For example, if the user clicks on the "Phone" radio button then submits the form, the form's data will include the line <code>contact=phone</code>.</p> <p>If you omit the <code>value</code> attribute in the HTML, the submitted form data assigns the value <code>on</code> to the group. In this scenario, if the user clicked on the "Phone" option and submitted the form, the resulting form data would be <code>contact=on</code>, which isn't helpful. So don't forget to set your <code>value</code> attributes!</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> If no radio button is selected when the form is submitted, the radio group is not included in the submitted form data at all, since there is no value to report.</p> </div> <p>It's fairly uncommon to actually want to allow the form to be submitted without any of the radio buttons in a group selected, so it is usually wise to have one default to the <code>checked</code> state. See <a href="#selecting_a_radio_button_by_default">Selecting a radio button by default</a> below.</p> <p>Let's add a bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a <a href="../pre"><code><pre></code></a> block to output the form data into:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="16T0vcaSioU9q/RFcmdQxv7MTZcqYxRsJ0G1Fkmly+U=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Please select your preferred contact method:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>phone<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Phone<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice3<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mail<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mail<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>log<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Then we add some <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> to set up an event listener on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event"><code>submit</code></a> event, which is sent when the user clicks the "Submit" button:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="z/n7qd6LpjTHePcFqJVL+5oKKwv37foo1tKgwTLtuzA=" data-language="js"><span class="token keyword">const</span> form <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"form"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> log <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#log"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +form<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> + <span class="token string">"submit"</span><span class="token punctuation">,</span> + <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FormData</span><span class="token punctuation">(</span>form<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">let</span> output <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> entry <span class="token keyword">of</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span> + output <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>output<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>entry<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>entry<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\r</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + log<span class="token punctuation">.</span>innerText <span class="token operator">=</span> output<span class="token punctuation">;</span> + event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span><span class="token punctuation">,</span> + <span class="token boolean">false</span><span class="token punctuation">,</span> +<span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <p>Try this example out and see how there's never more than one result for the <code>contact</code> group.</p> +<div class="code-example" id="sect4"> + +<iframe class="sample-code-frame" title="Data representation of a radio group sample" id="frame_data_representation_of_a_radio_group" width="600" height="130" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/radio/runner.html?id=data_representation_of_a_radio_group" loading="lazy"></iframe> +</div> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"> +<p>In addition to the common attributes shared by all <a href="../input"><code><input></code></a> elements, <code>radio</code> inputs support the following attributes.</p> <dl> <dt id="checked"><a href="#checked"><code>checked</code></a></dt> <dd> <p>A Boolean attribute which, if present, indicates that this radio button is the default selected one in the group.</p> <p>Unlike other browsers, Firefox by default <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing" target="_blank">persists the dynamic checked state</a> of an <code><input></code> across page loads. Use the <a href="../input#autocomplete"><code>autocomplete</code></a> attribute to control this feature.</p> </dd> <dt id="value_2"><a href="#value_2"><code>value</code></a></dt> <dd> <p>The <code>value</code> attribute is one which all <a href="../input"><code><input></code></a>s share; however, it serves a special purpose for inputs of type <code>radio</code>: when a form is submitted, only radio buttons which are currently checked are submitted to the server, and the reported value is the value of the <code>value</code> attribute. If the <code>value</code> is not otherwise specified, it is the string <code>on</code> by default. This is demonstrated in the section <a href="#value">Value</a> above.</p> </dd> <dt id="required"><a href="#required"><code>required</code></a></dt> <dd> <p>The <code>required</code> attribute is one which most <a href="../input"><code><input></code></a>s share. If any radio button in a same-named group of radio buttons has the <code>required</code> attribute, a radio button in that group must be checked, although it doesn't have to be the one with the attribute applied.</p> </dd> </dl> +</div> +<h2 id="using_radio_inputs">Using radio inputs</h2> +<div class="section-content"><p>We already covered the fundamentals of radio buttons above. Let's now look at the other common radio-button-related features and techniques you may need to know about.</p></div> +<h3 id="selecting_a_radio_button_by_default">Selecting a radio button by default</h3> +<div class="section-content"> +<p>To make a radio button selected by default, you include <code>checked</code> attribute, as shown in this revised version of the previous example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="jaQuJ+Ny38OzHtwk4A9yOdkNPoIubDM4gk1D36i7wKY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Please select your preferred contact method:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> + <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> + <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice1<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<span class="token punctuation">"</span></span> + <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> + <span class="token attr-name">checked</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>phone<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Phone<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice3<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mail<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mail<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Selecting a radio button by default sample" id="frame_selecting_a_radio_button_by_default" width="600" height="130" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/radio/runner.html?id=selecting_a_radio_button_by_default" loading="lazy"></iframe> +</div> <p>In this case, the first radio button is now selected by default.</p> <div class="notecard note" id="sect6"> <p><strong>Note:</strong> If you put the <code>checked</code> attribute on more than one radio button, later instances will override earlier ones; that is, the last <code>checked</code> radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.</p> </div> +</div> +<h3 id="providing_a_bigger_hit_area_for_your_radio_buttons">Providing a bigger hit area for your radio buttons</h3> +<div class="section-content"> +<p>In the above examples, you may have noticed that you can select a radio button by clicking on its associated <a href="../label"><code><label></code></a> element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.</p> <p>Beyond accessibility, this is another good reason to properly set up <code><label></code> elements on your forms.</p> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"><p>Radio buttons don't participate in constraint validation; they have no real value to be constrained.</p></div> +<h2 id="styling_radio_inputs">Styling radio inputs</h2> +<div class="section-content"> +<p>The following example shows a slightly more thorough version of the example we've seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="jaQuJ+Ny38OzHtwk4A9yOdkNPoIubDM4gk1D36i7wKY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>Please select your preferred contact method:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> + <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> + <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice1<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<span class="token punctuation">"</span></span> + <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> + <span class="token attr-name">checked</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>phone<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Phone<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice3<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contact<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mail<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contactChoice3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mail<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The CSS involved in this example is a bit more significant:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="ELcyRJ4KGMVQNhXb7NPG8I1kM9ORuH0EZhA/38+LUMY=" data-language="css"><span class="token selector">html</span> <span class="token punctuation">{</span> + <span class="token property">font-family</span><span class="token punctuation">:</span> sans-serif<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">div:first-of-type</span> <span class="token punctuation">{</span> + <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> + <span class="token property">align-items</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">label</span> <span class="token punctuation">{</span> + <span class="token property">margin-right</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span> + <span class="token property">line-height</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input</span> <span class="token punctuation">{</span> + <span class="token property">appearance</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> + + <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> + <span class="token property">width</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> + <span class="token property">height</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> + + <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #999<span class="token punctuation">;</span> + <span class="token property">transition</span><span class="token punctuation">:</span> 0.2s all linear<span class="token punctuation">;</span> + <span class="token property">margin-right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> + + <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> + <span class="token property">top</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:checked</span> <span class="token punctuation">{</span> + <span class="token property">border</span><span class="token punctuation">:</span> 6px solid black<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">button, +legend</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> + <span class="token property">padding</span><span class="token punctuation">:</span> 5px 10px<span class="token punctuation">;</span> + <span class="token property">border-radius</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> + <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">button:hover, +button:focus</span> <span class="token punctuation">{</span> + <span class="token property">color</span><span class="token punctuation">:</span> #999<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">button:active</span> <span class="token punctuation">{</span> + <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> + <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> + <span class="token property">outline</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Most notable here is the use of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance"><code>appearance</code></a> property (with prefixes needed to support some browsers). By default, radio buttons (and <a href="checkbox">checkboxes</a>) are styled with the operating system's native styles for those controls. By specifying <code>appearance: none</code>, you can remove the native styling altogether, and create your own styles for them. Here we've used a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border"><code>border</code></a> along with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius"><code>border-radius</code></a> and a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition"><code>transition</code></a> to create a nice animating radio selection. Notice also how the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:checked"><code>:checked</code></a> pseudo-class is used to specify the styles for the radio button's appearance when selected.</p> <div class="notecard note" id="sect7"> <p><strong>Note:</strong> If you wish to use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance"><code>appearance</code></a> property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword <code>none</code> does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.</p> </div> +<div class="code-example" id="sect8"> + +<iframe class="sample-code-frame" title="Styling radio inputs sample" id="frame_styling_radio_inputs" width="600" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/radio/runner.html?id=styling_radio_inputs" loading="lazy"></iframe> +</div> <p>Notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you'd want in a real web application, but it definitely shows off the possibilities.</p> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <td><strong><a href="#value">Value</a></strong></td> <td> A string representing the value of the radio button. </td> </tr> <tr> <td><strong>Events</strong></td> <td> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> +</td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <code><a href="#checked">checked</a></code>, <code><a href="#value">value</a></code> and <code><a href="../../attributes/required">required</a></code> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> +<code>checked</code> and <code>value</code> +</td> </tr> <tr> <td><strong>DOM interface</strong></td> <td> <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a></p> </td> </tr> <tr> <td><strong>Methods</strong></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a></td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role">radio</a></code></td> </tr> </tbody> </table></div></figure></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/input.html#radio-button-state-(type=radio)">HTML Standard <br><small># radio-button-state-(type=radio)</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody><tr> +<th><code>radio</code></th> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">4</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">1</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="../input"><code><input></code></a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> interface that implements it.</li> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList"><code>RadioNodeList</code></a>: the interface that describes a list of radio buttons</li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio</a> + </p> +</div> |